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

　　最近在开发一个基于Vue的后台管理系统，其中使用了element-ui第三方ui组件库。使用过组件库的人都知道，第三方组件每每会有一些默认的样式，而有些又是咱们想要改变的。

 

1、基础（了解 <style></style> 的 scoped 属性）

　　在编写Vue代码过程当中，为了避免让父组件相一样选择器名称设置的样式影响到子组件，咱们每每会给 <style></style> 标签设置 scoped 属性。可是若是设置了scoped属性，在该组件内的 Css 就只能做用于当前组件中的元素。

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

<template>
  <div class="example">hi</div>
</template>

<style scoped>
    .example {
        color: red;
    }
</style>

　　转换为：

<template>
    <div class="example" data-v-f3f3eg9>hi</div>
</template>

<style>
    .example[data-v-f3f3eg9] {
        color: red;
}
</style>

　　

　　固然，咱们也能够混合地使用本地样式和全局样式：

<style>
    /* 全局样式 */
</style>

<style scoped>
    /* 本地样式 */
</style>

　　

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

　　使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件能够从布局的角度出发，调整其子组件根元素的样式。

 

2、问题（使用第三方组件库时修改默认样式）

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

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

　　使用深度做用选择器：若是你但愿 scoped 样式中的一个选择器可以做用得“更深”，例如影响子组件，你可使用 >>> 操做符：

<style scoped>
    .a >>> .b { 
        /*  须要设置给子组件b的样式  */ 
        color: red;
    }
</style>

　　上述代码将会编译成：

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

　　　　

　　可是，有些像 Sass 之类的预处理器没法正确解析 >>>。这种状况下你可使用 /deep/ 或 ::v-deep 操做符取而代之——二者都是 >>> 的别名，一样能够正常工做。

<style scoped>
    .a /deep/ .b { 
        /*  须要设置给子组件b的样式  */ 
        color: red;
    }
</style>

　　

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

<style scoped>
    .a /deep/ .b { 
        /*  须要设置给子组件b的样式  */ 
        color: red !important;
    }
</style>