大家好，何优我是雅地年年!组件库的样式覆盖不掉，这应该是覆盖很多前端在工作中遇到过的问题。今天从实际案例出发分析原因，组件最后会给出在React和Vue项目中的库样最优解。

本文会讲清：

React中CSS Module的何优原理是什么?:global是做什么的?Vue中Scoped的原理是什么?深度作用选择器是什么?

先不讲概念，直接从需求出发：我使用了Antd组件库来展示一个日历。雅地

现在我想将当前日期上面的覆盖蓝色边框变成紫色。

可以试试你能不能实现。组件

不管是库样React还是Vue，整个Calendar是何优被封装起来的，高防服务器我们没有办法在组件外简单加上style/class改动内部的雅地样式。

import { Calendar } from antd;

...

</div>定位要覆盖的覆盖样式

首先用开发者工具定位对应的样式：.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中作为一个内部样式表。不管是组件库的样式还是我们写的自定义样式都是这样处理的。

我们要把组件库的样式先于自定义样式引入，b2b供应网这样自定义样式才能有更高的优先级。

修改源文件

直接改组件库的CSS源码是最简单粗暴的方法。打开你项目的node_modules文件夹，一层层点开，找到对应样式文件，按照需求修改即可。

个人项目这样处理确实可行，但是团队合作时，同步别人本地的node_modules就比较麻烦，只能算一个60分解法。

全局CSS文件

之前提到，把自己写的的CSS文件放在组件库的样式后面，可以保障自定义有更高优先级。只要重写同名的样式，理论上就能实现覆盖组了。

但这样

IT技术网

(责任编辑：IT科技)