大家好，我每年都有！组件库的风格无法删除。这应该是许多前端遇到工作的问题。今天对实际案例进行分析的原因最终将为React和Vue项目提供最佳解决方案。
本文将澄清：
本文首先在我的公共帐户中发行，订阅以获取我的最新文章！
不要首先谈论概念，直接从需求开始：我使用ANTD组件库显示日历。
现在，我想将当前日期上方的蓝色框架变成紫色。
公共帐户背景回复“ 101”以获取React版本的在线地址，回复“ 102”以获取VUE版本的在线地址
您可以尝试是否可以实现它。
无论是反应还是vue，整个日历都已封装。我们无法简单地将样式/类添加到内部样式中。
首先使用开发人员工具来定位相应的样式：这是我们要修改的地方。
熟悉webpack的人应该知道，介绍的CSS文件最终将通过style-loader.con。简单地处理，其角色是包装CSS文件，将其放入样式标签中，最后将其作为内部样式塞入HTML中表。无论是组件库还是我们编写的自定义样式的样式，这都是处理此操作的过程。我们需要将组件库的样式介绍给自定义样式，以便自定义样式可以具有更高的优先级。
组件库的CSS源代码是最简单，最粗鲁的方式。打开项目的node_modules文件夹，逐图打开，查找相应的样式文件，并根据需要对其进行修改。
个人项目确实是可行的，但是当团队合作时，同步他人的本地node_modules更加麻烦，并且只能被视为60个分配方法。
如前所述，放置您以组件库样式编写的CSS文件可以确保优先级更高。只要重写同名的样式，就可以在理论上实现覆盖范围。
但是这个？如果没有功能，治疗将无法正常工作：
因为它也涉及CSS组合选择器的优先级。
不用描述基础的优先级：。（！
在此基础上，有五个组合选择器可以积累优先级分数。以类选择器为例：
以上规则看起来很复杂。最实用的是第一个后代选择器，请记住它。ANTD组件库使用它：
如果课堂选择者的优先分数为10分，则形成的三个后代的后代为30分。
自定义样式仅为10点，因此，即使以后引入，也无法成功覆盖它。
有必要重写整个选择器以实现所需的效果。
它也是一个组合选择设备，但是选择器（逗号）优先级不是累积的：选择.a或.b元素（可以是逗号+空间）
以上我们引入了一个自定义的全局CSS文件以实现样式覆盖范围，但是只能给出80分。因为在实际工作中，项目所有者通常不允许全局CSS，这将导致样式污染：您定义样式，团队中的其他人恰好被命名，这会导致风格冲突。
我们需要为每个文件隔离，好像给它一个命名空间一样。基因上，React Project使用CSS模块，Vue Project使用Spopopeed标签。
接下来，您将讲述两种隔离方式的原理，以及在使用样式隔离时如何涵盖组件库的样式。
首先了解CSS模块的原理。它易于使用，在CSS文件中添加后缀，然后将其引入JS文件作为变量。
编译后，插入样式表和元素的类属性将添加一个哈希值作为命名空间。
可以看出，原始的CSS选择器和HTML元素名称已从所有人变化。文件名在前面添加，稍后添加哈希值，以便该样式只能在当前文件下生效。
但是，在这种样式隔离的情况下，我们最初用作覆盖的CSS也添加了哈希值，就像下面的图一样。目前，无法选择UI组件，并且覆盖范围将无法成功。
因此，React为我们提供了语法。效果范围内的样式将被视为全局CSS。
具体用途如下。在CSS文件中
在SCSS或SASS中，您也可以使用嵌套语法：
最后一个编译的代码如下：
借助Grame，即使您使用CSS模块进行样式隔离，也可以按预期实现覆盖范围功能。
Vue还具有类似的样式隔离功能。使用范围标记CSS部分，它也很容易使用？
编译的代码如下吗？：
可以看出，其原理与CSS模块不同。添加CSS选择器后，Vue的范围将添加一个中括号。
这不是VUE的原始语法，而是属性选择器。代表选择具有data-v-2fc5154c属性的HTML元素，也是MyButton类。仅在此文件中播放该文件中的HTML元素-V-2FC5154C属性。文件其余部分的HTML元素即使是MyWrapper类也不会生效。
回到同一问题，如果使用VUE项目将范围用作样式隔离，我们用来覆盖的样式还会添加属性选择器，但是UI组件中的HTML元素没有属性？
因此，VUE提供了类似的语法：深入的选择器。
它非常简单。将“穿透”添加到组件的内部样式中，动作域中的CSS样式不会将哈希值作为属性选择器。
汇编后？
借助深度演员选择器，可以用来覆盖模块内的CSS“穿透”。
您也可以写或。
与React相比，VUE深度的VUE深度是更好的解决方案。它必须是前指南（即，在上面的示例中的.myWrapper选择器）。渗透到它的样式实际上是作为子选择器，仅在当前文件下生效，以完全避免造成全局污染。
本文通过如何修改UI组件的内部样式作为起点。理解组合选择器的优先级分数以及实际反应和VUE项目中使用的样式隔离方案的原理 - 理解的优先级分数，从而分析了几种解决方案。CSS模块和范围。最后，如何使用：在样式隔离的情况下，全局和深度，如何使用样式隔离性选择设备制作样式。
如果这篇文章对您有帮助，请给我一个赞美并观看?
您的鼓励是我创作的最大动力??
原始：https：//juejin.cn/post/7097210680532533285