如何使用 Chakra UI for React 导入自定义 css 文件？答案

【问题标题】：How to import custom css files using Chakra UI for React?如何使用 Chakra UI for React 导入自定义 css 文件？
【发布时间】：2022-02-13 18:07:50
【问题描述】：

这是一个非常具体的问题，但我正在为 React 使用 Chakra UI 组件库，我想导入我自己的自定义 css 文件，尽管它不允许我这样做。

我不知道这是一个错误还是有意为之，但有什么办法可以解决它吗？

谢谢。

【问题讨论】：

【解决方案1】：

您可以通过导入 extendTheme 函数来扩展或覆盖默认主题中的标记。您可以覆盖属性以及添加新属性。但是如果你想添加一个外部 CSS 文件，我从阅读文档中发现为了在你的主题文件中导入其他文件类型（.css、.woff 或 .svg），你需要移动那些从主题文件中导入。

【讨论】：

【解决方案2】：

确保在正确的位置导入 css 文件。尝试将您的css 文件导入App.js，或者更具体地导入您初始化ChakraProvider 的文件。这种方法适用于我的项目：

import { ChakraProvider } from '@chakra-ui/react';
import './yourCssFile.css';

【讨论】：