react项目实现antd动态主题切换

Sponge_bob_

已于 2022-01-27 19:37:35 修改

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

于 2022-01-27 19:32:38 首次发布

本文链接：https://blog.youkuaiyun.com/Sponge_bob_/article/details/122722512

本文介绍了如何在React项目中结合antd实现动态主题切换。通过antd-theme-generator，配置相关文件，定义全局样式并创建变量及主样式文件，修改HTML入口文件，更新package.json的脚本，最后编写切换主题的方法来实现实时变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装antd-theme-generator

yarn add antd-theme-generator

2、项目scripts文件夹下新建generateColorLess.js

// generateColorLess.js

const path = require('path');
const {
   
    generateTheme } = require('antd-theme-generator');

const options = {
   
   
    stylesDir: path.join(__dirname, "../src/styles"),
    antDir: path.join(__dirname, "../node_modules/antd"),
    varFile: path.join(__dirname, "../src/styles/variables.less"),
    mainLessFile: path.join(__dirname, "../src/styles/index.less"),
    themeVariables: [
        "@primary-color",
        "@secondary-color",
        "@text-color"
    ],
    outputFilePath: path.join(__dirname