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


Posted in Javascript onAugust 12, 2019

demo

框架选择: create-react-app + mobx + webpack5 + antdesign

说明

  • 由于最近公司有多个主题的共存性,所以需要实现线上主题切换的功能,所以本文主要描述的是基于create-react-app之上的主题切换。
  • CSS切换 有考虑过根据用户选择的主题在切换的时候选择加载页面css文件的区分方案,但是考虑到这种形式需要在页面切换的时候去reload,因为htmlDOM是在css与JS的结合产物,用户体验不是很好。
  • Less切换 单纯引入所有的less文件去做切换,这样不能实现css的动态加载了,会增加无用css文件的加载
  • 最后通过比较及查询,获取到第三方插件:antd-theme-generator
  • 功能实现原则:使用 less 的 modifyVars 完成 antd 的主题变量替换。

安装 

antd-theme-generator

缺点: 需要配合 LESS v2.7.x 使用,不兼容IE。

cnpm install antd-theme-generator -S

添加主题切换文件 color.js

根目录下添加文件 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);
});

CSS 文件下添加less文件

添加 variables.less 文件:

@import "~antd/lib/style/themes/default.less"; //引入antd的变量文件,实现变量的覆盖
@primary-color: #1DA57A;
@link-color: #1DA57A;
@btn-primary-bg:#1DA57A;

HTML文件中加入全局less配置

index.html 中加入全局 less 变量配置,从而使 less 的 modifyVars 方法可以全局使用,切换主题时覆盖 default.less 中的变量:

<!-- 使用自动生成的color.less,主要路径与index.html文件同级 -->
<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/color.less" rel="external nofollow" /> 
<script>
 window.less = {
  async: false,
  env: 'production'
 };
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

项目启动处修改

修改项目运行配置 package.json ,项目运行的同时完成页面color文件的配置

"scripts": {
 "start": "node color && node scripts/start.js",
 "build": "node color && node scripts/build.js",
 "test": " node color && node scripts/test.js"
},

页面调用方法切换主题

页面点击主题切换配置,这样写的缘故是因为我配置的变量不同:

window.less.modifyVars(
 {
  '@primary-color': '#aaa',
  '@menu-dark-item-active-bg':'#aaa',
  '@link-color': '#aaa',
  '@text-color':'#aaa',
  '@btn-primary-bg': '#aaa',
 }
)
.then(() => { 
 message.success('主题切换成功')
})
.catch(error => {
 message.error(`主题切换失败`);
 console.log(error)
});

由于之后的配置中新增的样式需要遵循主题配置的可以选择使用统一变量,所以变量设置的时候,可以添加 var(--PC) 的全局变量设置

总结

以上所述是小编给大家介绍的react实现antd线上主题动态切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
html中table数据排序的js代码
Aug 09 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 #Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 #Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 #Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 #Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 #Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 #Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 #Javascript
You might like
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
php验证码生成代码
2015/11/11 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
浅谈python3中input输入的使用
2019/08/02 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
购房委托书
2014/10/15 职场文书
简易离婚协议书范本
2014/10/24 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
企业法律事务工作总结
2015/08/11 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
公司董事任命书
2015/09/21 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书