关于无法在项目中修改自定义组件主题颜色的问题

发布时间:2021-11-29 01:30:32

最*在负责改一个项目的组件样式的时候,遇到了一个很有(wu)趣(jie)的bug。


背景: 1.项目框架是用react+webpack搭建的,ui使用antd。2.组件也是用react+webpack搭建,然后打包上传到npm,项目再通过npm安装引入使用。


问题: 项目通过less.modifyVars去修改主题颜色,但是当引入使用组件的时候,原本按照设想,组件也应该会随着项目主体颜色的修改而修改,但是却没有。
分析:组件内使用的是模仿antd的主题颜色修改的代码,全局声明定义主题颜色的less变量@primary-color并且赋予初始值#ffffff,再赋值到根元素上:root {var(?primary): @primary-color}根样式上通过less.modifyVars去修改样式,打包之后,这个全局变量指向项目的同名变量,而不再是组件内的(貌似是通过配置webpack实现的),但是当我debug的时候,less.modifyVars有成功执行,组件的颜色却还是初始颜色。同样的项目,在另外一个同事的电脑上运行却是正常的(原本我本地也是正常的,后来就异常了),我跟他的项目环境唯一的区别就是他的依赖包,这就是node_modules这个文件夹是没有删除过的,有很多缓存版本,而我的是全部删除重新安装过。这个时候我就判断,可能是依赖包差异导致的,因为我是用cnpm安装的,可能会丢包。于是我将两个文件夹作个比较,结果一无所获……


结果: 百度这个问题大概花了2~3天的时间,就在我几乎要放弃的时候,偶然看到一个熟悉的对象:document。这时候我就想,无法从根本解决问题,那至少可以找个替代的方式去改变一下颜色吧。于是乎,我尝试使用了这个方式,document.querySelector(‘:root’).setProperty(‘@primary-color’, #cccccc)。结果成功了!自己理顺了一下这个代码的作用:项目中less.modifyVars有成功执行,并且也修改了主题颜色,但是没有修改组件的主题颜色,那样我强制使用setProperty方式去修改样式,组件的颜色也就随之修改,可能资源会有些浪费,但也没有办法了,毕竟不能从根本解决问题,只能用其他方法去弥补。

相关文档

  • 警惕身边的催老剂
  • 2020年广东省韶关市新丰县招聘政府雇员公告
  • 精选有关于思念故乡的诗句
  • 清华大学qs
  • 一线班组长在生产管理中的重要作用
  • 解决catkin_make时出现make[2]: *** No rule to make target ‘/usr/lib/libOpenNI2.so‘, needed by ‘*******‘。
  • 有关三年级的周记
  • windows处于通知模式是什么意思
  • 网易云丧评论文案精选40句
  • 怎么简单去除黑眼圈
  • 什么是征信业务征信业务的基础知识
  • 迪士尼最受欢迎的卡通人物 米老鼠和唐老鸭人气超高
  • 四年级英语上册第二单元试题
  • 侧柏是裸子植物吗
  • 2016年海南人力资源师考试指南
  • 2021三年级下册语文教学计划模板
  • 晚上的车祸
  • VS“无法查找或打开PDB文件”的解决方法
  • 2017年广州工资扣税标准
  • striderite的中文叫什么?striderite的中文怎么翻译?
  • 除夕包饺子作文4篇
  • 《女生贾梅》读后感范文300字
  • 喜欢有风的日子美文
  • LeetCode笔记??34在排序数组中查找元素的第一和最后一个位置
  • 详释(常见UITextView 输入之字数限制)之一---固定长度
  • 启动supervisor报错解决
  • 第三周工作总结及计划表
  • 关于兔的成语大全
  • 浅谈民政落实党风建设推进干部廉洁从政
  • 脑肿瘤图像分割算法
  • 猜你喜欢

  • 标准版电子设备买卖合同书
  • 部编版一年级下册语文5动物儿歌课件设计统编版
  • 高二地理必修三第一章知识点
  • IPO前期调查表(表格模板、XLS格式)
  • 白羊座被骂的反应
  • [PPT荟萃]临床护士的职业暴露与职业防护ppt课件
  • 教育最新K12上海市金山中学2016-2017学年高一语文下学期期末考试试题
  • 初中新学期的学*计划3篇.doc
  • 江密峰中学《中学教师专业发展的研究》总结
  • 江苏省2016年监理工程师执业资格:工程师的口头指示考试试题
  • 2018-2019学年河北省承德市第一中学高一下学期期中考试数学试题Word版含答案
  • 上市公司融资约束衡量指数构建-2019年精选文档
  • 《动物的运动》ppt精品课件18
  • 星的守望作文【初中初二800字】
  • 万安县林群油茶种植专业合作社企业信息报告-天眼查
  • 教育部统编版二年级下册语文课件-23《祖先的摇篮》 人教部编版 (共25张PPT)课件
  • 【语文专题推荐】小学语文考点综合复*小升初模拟试卷III卷
  • 小学二年级读后感作文250字(三篇)
  • 三亚君图网络科技有限公司企业信用报告-天眼查
  • 脸上有痘痘如何调理
  • 夏天注意安全行车
  • 写人的好词好句好段
  • 2017中考复习题型解析
  • 乐嘉经典语录大全
  • 厨房美食菜谱:芦笋肉末二米粥的做法
  • 22个经典的行为学教你看穿谎言
  • “厚德载物、二十五德”主题班会总结
  • 人教版 小学美术一年级下册《第20课汉字中的象形文字 》PPT课件
  • 《汽化和液化》物态变化精选教学PPT课件10
  • 2018-2019年重庆市垫江县莲花小学校三年级上册科学模拟复习题无答案
  • Mysql 中 MyISAM 和 InnoDB 的区别有哪些
  • 丝裂霉素与可调整缝线小梁切除术联合治疗青光眼的临床观察
  • 生物教师年终考核个人工作总结
  • 青年志愿者“天使之行”策划书
  • 血清尿酸与C反应蛋白联合检测在冠心病诊治中的应用价值
  • mybatis的懒加载
  • 利用微信、QQ软件优化高职英语口语教学
  • 书籍封面设计的要求及重要原则
  • *面汇交力系教案
  • 多媒体教学软件的设计.ppt
  • 项目管理专业英语-管理环境及计划与计划管理
  • “森林实在太重要了”
  • 电脑版