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

 更新时间:2019年08月12日 10:30:45   转载 作者:张小汪  
这篇文章主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

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线上主题动态切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • JS写的贪吃蛇游戏(个人练习)

    JS写的贪吃蛇游戏(个人练习)

    本文为大家介绍的是使用JS写的贪吃蛇游戏,个人练习之用,感兴趣的额朋友可以参考下哈,希望对大家学习js有所帮助
    2013-07-07
  • js轮盘抽奖实例分析

    js轮盘抽奖实例分析

    这篇文章主要为大家详细介绍了js轮盘抽奖实例,分析js轮盘抽奖实现原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript的事件代理和委托实例分析

    JavaScript的事件代理和委托实例分析

    在javasript中delegate这个词经常出现,看字面的意思,代理、委托。在各种框架中,也经常能看到delegate相关的接口。这些接口又有什么特殊的用法呢?这篇文章就主要通过实例介绍一下javascript delegate的用法和原理。
    2015-03-03
  • 理解javascript定时器中的单线程

    理解javascript定时器中的单线程

    这篇文章主要帮助大家理解javascript定时器中的单线程,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS求1到任意数之间的所有质数的方法详解

    JS求1到任意数之间的所有质数的方法详解

    这篇文章主要介绍了JS求1到任意数之间的所有质数,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • 浅谈JavaScript作用域和闭包

    浅谈JavaScript作用域和闭包

    本篇文章主要介绍了JavaScript作用域和闭包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js获取checkbox值的方法

    js获取checkbox值的方法

    这篇文章主要介绍了js获取checkbox值的方法,涉及js针对节点的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript修改作用域外变量的方法

    JavaScript修改作用域外变量的方法

     作用域是JavaScript最重要的概念之一,想学好javascript需要深入理解javascript作用域原理,接下来通过本文给大家介绍javascript修改作用域外变量的方法,需要的朋友一起学习吧
    2016-03-03
  • 关于scrollLeft,scrollTop的浏览器兼容性测试

    关于scrollLeft,scrollTop的浏览器兼容性测试

    弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样,接下来介绍下scrollLeft,scrollTop的浏览器兼容性,感兴趣的你可以参考下哈
    2013-03-03
  • javascript事件冒泡和事件捕获详解

    javascript事件冒泡和事件捕获详解

    最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处。找到了一些好文章解惑,在这里分享给大家。
    2015-05-05

最新评论