时间:2021-05-26
demo
框架选择: create-react-app + mobx + webpack5 + antdesign
说明
安装
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 文件:
HTML文件中加入全局less配置
index.html 中加入全局less 变量配置,从而使less 的modifyVars 方法可以全局使用,切换主题时覆盖default.less 中的变量:
项目启动处修改
修改项目运行配置package.json ,项目运行的同时完成页面color文件的配置
页面调用方法切换主题
页面点击主题切换配置,这样写的缘故是因为我配置的变量不同:
由于之后的配置中新增的样式需要遵循主题配置的可以选择使用统一变量,所以变量设置的时候,可以添加var(--PC) 的全局变量设置
总结
以上所述是小编给大家介绍的react实现antd线上主题动态切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、React结合Antd实现登录功能引入所需的Antd组件,代码如下所示:import{Form,Icon,Input,Button,message}from
前言:此文需要有一定react,redux基础,具体学习资料请科学上网。使用create-react-app脚手架具体基础配置请参考配合antd组件实现的管理系
使用antd按需加载使用react-app-rewired对create-react-app的默认配置进行自定义1、yarnaddreact-app-rewir
作为一个Vue用户,是时候扩展一下React了,从引入antd、配置less、router,终于实现了一个简单的登录表单。代码如下:importReactfro
React在安装antd之后出现的Can'tresolve'./locale'问题,是因为moment在2.2之后的版本都有问题,而react默认使用了最新的m