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

在为 antd.less

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

为了导入深色主题，我这样做了:

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

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