Vue——解决使用第三方组件库时无法修改默认样式的问题（使用 /deep/ 或 >>> ）

原文参考: https://www.cnblogs.com/belongs-to-qinghua/p/11698139.html

遇到的有问题

是不是经常使用Iview或者elementUi组件的时候，在本组件修改它原来的样式往往无效呢？

源码

未修改前源码

效果如下（placeholder显示不全）

解决方法

源码

增加 /deep/或 >>>后的效果

原理解释:

一、基础（了解 标签设置 scoped 属性。但是如果设置了scoped属性，在该组件内的 Css 就只能作用于当前组件中的元素。

实际上，它是通过使用 PostCSS 来实现以下转换：

转换为：

也可以全局和局部混合使用:

关于子组件根元素的样式结果，还需要单独叙述一下：

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
问题（使用第三方组件库时修改默认样式）

使用第三方组件库时遇到的问题——无法修改默认样式。

接下来，就介绍和解决一下，使用第三方组件库时遇到的问题——无法修改默认样式。

在项目中使用 element-ui 组件库，设置样式时发现根本无法覆盖掉默认样式，开始我也以为是选择器的权重问题，后来发现，无论怎么加类名，样式都无法生效。现在提供如下的解决方案：

使用深度作用选择器：如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

上述代码将会编译成：

.a[data-v-f3f3eg9] .b {
    /*  需要设置给子组件b的样式  */
    color: red;
}

但是，有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

如果使用了上面的 /deep/ 后发现样式依然没有生效，那么就给它再来个最高权重（ !important ）：

写在app.vue中统一整合