React+antd在线上动态更换皮肤主题

  • Z时代
  • 2024-01-10
  • 分类：综合

react

原理：

但官方提供的这种方式只能在编译时改变主题，无法在运行性动态切换。下面就是本文的重点，如何实现在运行时动态切换主题。

提取antd的less变量文件

我们的思路就是提取ant-design-vue中所有的less代码汇总到一个文件中，然后在index.html页面中直接引用，最后使用less.js中的modifyVars方法修改主题变量，这样antd的样式就不会被编译，实现运行时动态切换

1.首先安装提取less文件的插件antd-theme-webpack-plugin

2.在variables.less文件中添加主题变量（一定要与options中的themeVariables一致！）

3.index.less可以为空

4.使用window.less.modifyVars()方法修改主题

5.需要将less的版本号改成3.0以下，否则后面再更改主题时会出错！！！这里改成了2.7.2

开始
因为项目里一个更换皮肤的功能，虽然antd官网给出了更改主题的方法，但那是静态的，没办法在线上更换，然后发现网上在这方面的资料也并不多，这个业务难道不是应该很普遍吗？然后我就花了一些时间去解决了这个问题，并将踩过的坑写出来，再给出解决方案。

antd-theme-webpack-plugin
这个工具是我在网上找到的。下面是这个包的文档，但这个文档实际上写的并不清楚，我在按文档写的过程里遇到了很多的坑。

antd-theme-webpack-plugin文档

我们先在控制台执行：
yarn run antd-theme-webpack-plugin -D

然后去webpack.config.common.js里配置：

//顶部引入
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

//需要在less-loader里配置options，这个配置是在less的配置规则下
{
loader:'less-loader',
options:{
//这里需要在less的配置规则里打开javascriptEnabled
javascriptEnabled: true,
}
}


//在plugins里
plugins:[
new AntDesignThemePlugin({
antDir: path.join(__dirname, './node_modules/antd'),//antd包位置
stylesDir: path.join(__dirname, './src/styles/theme'),//指定皮肤文件夹
varFile: path.join(__dirname, './src/styles/theme/variables.less'),//自己设置默认的主题色
indexFileName: './public/index.html',
mainLessFile: path.join(__dirname, './src/styles/theme/index.less'),
outputFilePath: path.join(__dirname, './dist/theme/color.less'),//输出到什么地方
themeVariables: [//这里写要改变的主题变量
'@primary-color',
'@btn-primary-bg',
],
generateOnce:false
})
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
这里的配置有几个坑点，等下结合后面一起说。

然后我们去index.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React</title>
</head>
<body>
<link rel="stylesheet/less" type="text/css" href="./theme/color.less" /><!--这里link放在哪，style生成在哪里，注意样式被覆盖-->
<script>
window.less = {
async: false,
env: 'production'//production development
};
</script>
<div >
</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html这里有几个坑：
1.注意link标签放的位置，要放在body的第一行里，因为到时候style是会生成在该ling标签下面的，如果你把link放在head里，到时候生成的主题样式会被覆盖掉。
2. 我们需要在这里引入less文件，因为我们需要使用到window.less这个对象里的方法，但是我们不能引入less3.0以上的，不然浏览器控制台会报下面这样的错，样式也不会出现。


然后在styles的文件夹下创建文件，这里文件创建的路径需要和webpack.config.common.js里写的路径一样。


然后在variables.less里：

//在顶部加上这一行
@import "~antd/lib/style/themes/default.less";

@primary-color: #6064f4;
@btn-primary-bg: #ccc849;
1
2
3
4
5
然后把要更换的主题颜色给写上去，把antd默认的主题颜色给覆盖掉，这里有个坑的地方是，这里的两个颜色变量一定要写上去，不然有的时候会出现更换主题颜色失败的情况。

index.less这个文件其实是可有可无的，我们可以不在里面写东西，但是我在项目里用到了，后面会说。

然后我们去页面里写一下：

handleClick(){
window.less.modifyVars(//更换主题颜色要这么写
{
'@primary-color': '#e64e14',
'@btn-primary-bg': '#5d72cc',
}
)
.then(() => {console.log('success')})
.catch(error => {
console.log(error);
});
}
render() {
return (
<div className='minor-borderTop major-fontColor'>
<Button onClick={this.handleClick} type={'primary'}>更换</Button>
</div>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
然后坑的地方来了，如果你想要使用variable.less里的变量，一般来说我们都是在自己新建的less文件的顶部引入这个文件，然后在用到颜色的地方直接加上@primary-color这个变量，但是这里不行，因为它只会把variables.less和index.less这两个文件里的变量给更改了，其他的文件是固定生成的，不会被覆盖。所以如果你想用得反过来，比如在新建的less文件里使用变量，然后在variables.less的顶部引入。但这样肯定是不好的，react有那么多组件，如果每个都引入到这个variabkes.less的顶部的话，那得多大？

然后我想了两个办法，

使用css的变量var，在variabkes.less文件里，像下面这样写：
@primary-color: #6064f4;
@btn-primary-bg: #ccc849;

:root{
--primary:@primary-color;
}
1
2
3
4
5
6
这样子你需要使用的less文件里就可以引入variabkes.less文件，然后这样写background:var(--primary)，这样在@primary-color改变了之后，–primary也可以拿到了。但是这个方法有兼容性问题，ie完全不支持css变量，所以这个方法适合不需要兼容ie的使用。

这里就用到了我之前说的index.less，我们在index.less的顶部引入variabkes.less，在里面写：
.primary-bg{
background-color:@primary-color;
}

.fontColor{
color:@primary-8;
}
1
2
3
4
5
6
7
我们可以直接新建几个类，写上背景颜色，文字颜色，等@primary-color改变的时候，类里的颜色也会发生改变。然后在需要的地方引用这个index.less，然后去组件里加上这个类就行了。其实这个方法算是稍微有点low，但是这个也算是一个比较好的解决办法，因为你要加的类其实没有几个，背景颜色类，字体颜色类。这里讲一下你要改变的颜色变量必须要是antd定义好的，你自己定义一个比如@primary-fontColor是没用的，因为antd并没有这个变量，如果你要看antd定义了哪些变量，可以去node_modules/antd/lib/style/themes/default.less这个文件里看。上面那里我使用的@primary-8这个变量就是antd自己定义的，这个变量是根据@primary-color的颜色来变化的，所以我们不需要在webpack引入，数字越大颜色越深。

然后开始打包，你需要在dist文件夹下创建一个theme文件夹，然后才能去执行打包命令，然后你会发现，在theme文件夹下有一个color.less文件，在根目录下也有一个color.less文件，你可以把根目录下的color.less删除，这个是多余生成的。

然后我们打开自己写的页面：

可以发现主题颜色是我们在variables.less定义的默认颜色，然后我们点击按钮，页面变成了下面这样：

变成了我们在按钮点击事件里定义的颜色了。

我们发现link下面生成了一个style文件，这里就是之前说的颜色注意被覆盖的问题了。

如果你想要更多的颜色，可以引入调色盘的组件去改变主题颜色，比如antd官网拉到最下方可以改变主题颜色那样。

结尾
这章写了很多东西，主要是有坑的地方太多了，我写的又比较详细，但同时感觉也写的有点复杂了，如果又不懂的可以在评论里问。
————————————————
版权声明：本文为CSDN博主「web999_Z」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/asdqwe_zxc/java/article/details/88309987

以上是 React+antd在线上动态更换皮肤主题 的全部内容， 来源链接： utcz.com/z/381201.html

回到顶部