react实现antd线上主题动态切换功能

demo 框架选择： create-react-app + mobx + webpack5 + antdesign 说明 由于最近公司有多个主题的共存性，所以需要实现线上主题切换的功能，所以本文主要描述的是基于create-react-app之上的主题切换。 CSS切换 有考虑过根据用户选择的主题在切换的时候选择加载页面css文件的区分方案，但是考虑到这种形式需要在页面切换的时候去reload，因为htmlDOM是在css与JS的结合产物，用户体验不是很好。 Less切换 单纯引入所有的less文件去做切换，这样不能实现css的动态加载了，会增加无用css文件的加载 最后通过比 在React应用中实现Ant Design的在线主题动态切换功能是一项常见的需求，特别是在有多个主题共存的情况下。本示例是基于`create-react-app`构建的React应用，并结合了`mobx`状态管理库、`webpack5`打包工具以及`antd` UI框架。我们将探讨如何通过`antd-theme-generator`库来实现这个功能。 对于CSS切换的两种传统方法，一种是根据用户选择的主题动态加载不同的CSS文件，但这种方法会导致页面重载，影响用户体验。另一种是单纯引入所有Less文件进行切换，但这会导致不必要的CSS文件加载，浪费资源。因此，我们需要寻找一个更优的解决方案。 `antd-theme-generator`是一个用于生成自定义Ant Design主题的工具，它利用了Less的`modifyVars`功能，可以动态地替换Ant Design的变量，从而实现主题的实时切换。在使用这个工具之前，确保你的项目中已经安装了`antd-theme-generator`，可以通过以下命令安装： ```bash cnpm install antd-theme-generator -S ``` 接下来，你需要创建一个主题切换配置文件，例如在根目录下创建`color.js`，然后设置相关选项，指定样式目录、Ant Design库的位置、变量文件等： ```javascript // color.js const path = require('path'); const { generateTheme } = require('antd-theme-generator'); const options = { stylesDir: path.join(__dirname, './src/css'), antDir: path.join(__dirname, './node_modules/antd'), varFile: path.join(__dirname, './src/css/variables.less'), mainLessFile: path.join(__dirname, './src/css/index.less'), themeVariables: [ // 需要动态切换的主题变量 '@primary-color', '@secondary-color', '@text-color', '@text-color-secondary', '@heading-color', '@layout-body-background', ], indexFileName: 'index.html', outputFilePath: path.join(__dirname, './public/color.less'), // 页面引入的主题变量文件 }; generateTheme(options) .then((less) => { console.log('Theme generated successfully'); }) .catch((error) => { console.log('Error', error); }); ``` 在`variables.less`文件中，你可以覆盖Ant Design默认的变量值，例如设置主色： ```less @import "~antd/lib/style/themes/default.less"; // 引入antd的变量文件，实现变量的覆盖 @primary-color: #1DA57A; @link-color: #1DA57A; @btn-primary-bg: #1DA57A; ``` 为了让动态生成的`color.less`文件生效，需要在HTML的`index.html`中引入，并设置全局的Less配置： ```html <!-- 使用自动生成的color.less，主要路径与index.html文件同级 --> <link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/color.less" /> <script> window.less = { async: false, env: 'production', }; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> ``` 在项目启动时，需要确保`color.js`在应用运行之前被执行。为此，可以在`package.json`的`scripts`部分做如下修改： ```json "scripts": { "start": "node color.js && node scripts/start.js", "build": "node color.js && node scripts/build.js" } ``` 这样，每次启动或构建项目时，都会先生成主题文件`color.less`，然后在页面加载时，通过`less.js`动态解析并应用这些主题变量，实现Ant Design主题的动态切换。 总结起来，实现Ant Design在线主题动态切换的关键在于使用`antd-theme-generator`生成自定义主题文件，并在HTML中引入该文件，结合Less的`modifyVars`功能，实现在不刷新页面的情况下，动态更新UI主题。这种方法避免了不必要的资源浪费，同时提供了流畅的用户体验。