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); });
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站名称:react实现antd线上主题动态切换功能-创新互联
本文链接:http://scyanting.com/article/eochc.html