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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
js实现京东轮播图效果
Jun 30 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
原生js实现随机点名
Jul 05 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
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Python制作爬虫抓取美女图
2016/01/20 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python下10个简单实例代码
2017/11/15 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
2013年高中生自我评价
2013/10/23 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
运动会方队口号
2014/06/07 职场文书
大学毕业生推荐信
2014/07/09 职场文书
导游词开场白
2015/01/31 职场文书
单位实习介绍信
2015/05/05 职场文书
民事二审代理词
2015/05/25 职场文书
心理健康教育主题班会
2015/08/13 职场文书
Java对文件的读写操作方法
2022/04/29 Java/Android