reactjs - 如何使用craco和antd进行主题切换？

Question

我正在尝试将 Craco 与 Ant-Design 一起使用，但我无法制作合适的主题切换器。有没有更简单的方法来为此实现主题切换器？

const CracoLessPlugin = require("craco-less");
const {
    getThemeVariables
} = require('antd/dist/theme');

module.exports = {
    plugins: [{
        plugin: CracoLessPlugin,
        options: {
            lessLoaderOptions: {
                lessOptions: {
                    modifyVars: {
                        "@primary-color": "#1DA57A",
                        ...getThemeVariables({
                            dark: true,
                            compact: true
                        })
                    },
                    javascriptEnabled: true
                }
            }
        }
    }],
};

Answer 1

在导入之前，我能够在 App.js 中的主 CSS 文件中包含一个导入antd.less

要导入深色主题，我这样做了：

@import '~antd/lib/style/themes/dark.less';
@import '~antd/dist/antd.less';

您可以在这里了解更多信息https://ant.design/docs/react/customize-theme#Customize-in-less-file