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

Question

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

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

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

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

Answer 1

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

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

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

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

也检查这个线程，以获得详细描述。