如何优雅地覆盖组件库样式？
时间：2023-03-21 22:02:29
科技观察
大家好，我是念念！组件库的样式不能被覆盖。这应该是很多前端在工作中遇到的问题。今天结合实际案例分析原因，最终给出在React和Vue项目中的最优解决方案。本文将阐明：React中CSSModule的原理是什么？环球是做什么的？Vue中Scoped的原理是什么？什么是深度效果选择器？先不说概念，直接从需求说起：我用了Antd组件库来展示一个日历。现在我想把当前日期上方的蓝色边框变成紫色。你可以试试看能不能实现。无论是React还是Vue，整个Calendar都是封装起来的，我们没有办法简单的在组件外部添加style/class来改变内部的样式。import{Calendar}from'antd';...
定位要覆盖的样式首先使用开发者工具定位到对应的样式：.ant-picker-calendar-date-today，这是我们要修改的地方。.ant-picker-calendar-full.ant-picker-panel.ant-picker-calendar-date-today{border-color:#1890ff;}熟悉webpack的应该都知道，导入的CSS文件最终都会被style-loader处理。简单的说，它的作用就是将CSS文件打包，放在style标签中，最后作为内部样式表塞进HTML中。不管是组件库的样式，还是我们写的自定义样式，都是这样处理的。我们需要在自定义样式之前引入组件库的样式，这样自定义样式才能有更高的优先级。修改源文件直接修改组件库的CSS源码是最简单粗暴的方法。打开你项目的node_modules文件夹，点击每一层，找到对应的样式文件，根据自己的需要进行修改。这样处理个人项目确实可行，但是在团队工作时，同步其他人本地的node_modules就比较麻烦，只能算是60种分解方式。全局CSS文件前面说了，把自己写的CSS文件放在组件库的样式后面，可以保证自定义有更高的优先级。只要覆盖同名样式，理论上就可以实现覆盖组。但是这样
