Antd 黑暗主题覆盖了我自己的 css。如何解决？

【问题标题】：Antd dark theme is overriding my own css. How to solve it?Antd 黑暗主题覆盖了我自己的 css。如何解决？
【发布时间】：2020-08-03 01:06:04
【问题描述】：

我在 CRA 项目中安装了 antd。我创建了一些自己的类并覆盖了默认的andt css。

然后我想要 andt 表格组件，但带有深色主题。因此使用 webpack 安装了深色主题但失败了。所以我尝试了 craco 并且工作正常。使用 craco-less，成功安装了黑暗主题，但现在它覆盖了我自己的 css。

在检查模式下检查原因后，我的 css 覆盖了默认和 css，而深色主题覆盖了我的。

有人遇到过这种问题吗？提前致谢。

【问题讨论】：

你能在 package.json 中添加 ' "scripts" : { "less" : ____ } ' 代码吗？你必须在加载和 css 后加载你的 css。
@JanithaRasanga 你能解释一下如何添加“less”脚本吗？

标签： css reactjs less antd craco

【解决方案1】：

按照 antd 的 Customize-Theme 指南，您可以像示例中的那样使用 u craco config craco.config.js 来覆盖主题变量。

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

根据我的经验，您必须使用 less 文件来覆盖来自 antd 的 less，因此请尝试将您的自定义样式移动到 less 文件中。

也请查看此线程，了解详细说明。

【讨论】：

感谢您的回答，但正如我所说，这导致我的自定义 css 被覆盖。