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

开始

因为项目里一个更换皮肤的功能，虽然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的配置规则里打开javascriptEnabledjavascriptEnabled: 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})
]

这里的配置有几个坑点，等下结合后面一起说。

然后我们去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 id="root"></div><script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script></body>
</html>

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;

然后把要更换的主题颜色给写上去，把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>)}

然后坑的地方来了，如果你想要使用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;
}

这样子你需要使用的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;
}

我们可以直接新建几个类，写上背景颜色，文字颜色，等@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官网拉到最下方可以改变主题颜色那样。

结尾

这章写了很多东西，主要是有坑的地方太多了，我写的又比较详细，但同时感觉也写的有点复杂了，如果又不懂的可以在评论里问。

React+antd在线上动态更换皮肤主题相关推荐

[ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan ------------------ ...
python主题更改_jupyter notebook更换皮肤主题的实现
jupyter notebook更换皮肤主题您是否厌倦了jupyter notebook的默认主题呢? 您是否想过能不能让jupyter notebook的界面更加高大上一点呢? 您是否想一天换一个 ...
配置jupyter notebook神器更换皮肤主题代码字体大小
文章目录一.更改默认工作目录二.更换皮肤主题,jupyterthemes的安装和使用原文链接:https://yetingyun.blog.csdn.net/article/details/10 ...
Skin++动态更换皮肤的Bug （未解决。。。。求高手）
这Bug只在Debug时出现,Release版本不会出现这样的问题更换皮肤没问题,问题就出现在关闭整个程序时~~~~~ PS.用到是Skin++ 2.0,VS2010,详细见另一博文! 动态更换皮肤 ...
轻松实现Android 更换皮肤(主题)
目前很多app都具有换肤功能,可以根据用户自己的喜好定制自己的界面,比如新浪微博,网易新闻等等.今天这里我就是要介绍一种机制实现app换肤. 我找了几款app换肤的应用,换肤基本都是更换了界面的Ico ...
Vue + Element UI 实现权限管理系统（更换皮肤主题）
自定义主题命令行主题工具 1.安装主题工具首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...
Vue + Element UI 实现权限管理系统前端篇（六）：更换皮肤主题
自定义主题命令行主题工具 1.安装主题工具首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...
vue项目动态换皮肤/换主题的通用实现方式（热换肤，无需重启项目，通俗易懂，看了就会！！！）
VUE项目动态切换皮肤/主题的通用实现方式提供一种通用的的解决方案,无需重启项目,无需更改import的文件路径,直接通过功能按钮热更换皮肤/主题 vue-cli版本:3.0 1. 在pulic目录 ...
react实现线上主题动态切换功能
demo 框架选择: create-react-app + mobx + webpack5 + antdesign 说明由于最近公司有多个主题的共存性,所以需要实现线上主题切换的功能,所以本文主要描 ...

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

开始

antd-theme-webpack-plugin

结尾

React+antd在线上动态更换皮肤主题相关推荐

最新文章

热门文章