如何使编辑工作于React组件库的CSS文件？

Question

我正在为带有antd, material-ui的项目使用一些组件库，例如antd, material-ui等。我需要修改一些组件CSS。 例如，我在antd目录中antd并将css文件放在node_modules\\antd\\dist 。 与antd.css和antd.min.css一起的文件antd.css ，还有一个名为antd.less的文件。 我的问题是我要对CSS进行哪个文件更改？ 帮助将不胜感激。

Answer 1

很难说，但可能少了一点。

我强烈建议改写localcss文件中的CSS，而不要修改node_modules。 维护起来会更加方便。 这将在生产中或您要更新模块时变得很痛苦。 被认为是不良做法。

如果确实要直接在模块中进行编辑，请将模块克隆到您的代表中。 出于相同的原因，不要将其留在node_modules中。

Answer 2

覆盖较少的变量（替代方法）＃

通过较少的定义文件覆盖变量。

创建一个类似于以下内容的较少文件的独立文件，并将其导入您的项目中。

@import "~antd/dist/antd.less";   // import official less entry file
@import "your-theme-file.less";   // override variables here

默认变量https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less