Vue修改第三方组件库样式问题

问题：使用Vue的第三方组件库（element-ui、antdv）时有时候需要进行局部样式调整，使用 /deep/ 进行全局样式调整很容易，那么局部样式调整如何实现呢？

Vue中使用scoped属性

1、在vue组件中，在style标签中添加scoped属性，这样在这里定义的css只作用于当前组件中的元素，可使组件之间的样式不会相互污染，使样式私有化。比如在父组件内使用子组件，父组件的样式不会渗透到子组件中。
2、在加上scoped后，会为DOM节点自动添加一个唯一的属性（data-v-f3f3eg9后面这串数字像是独一无二的hash值），以保证其唯一性。同时在相应的css选择器末尾，也加上了当前组件的data-v-f3f3eg9属性，来使其私有化。

转化后：

深度作用选择器：/deep/（>>>）

使用了scoped后，尽管实现组件样式的私有化，但在我们实际的项目中，在很多地方使用重复的子组件或其他的样式库时，在个别地方需要微调样式，这个时候不能直接改子组件样式，而且在父组件里的样式又不能渗透到子组件去。这个时候文档中有一句话：

不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

所以还是有办法解决刚才那个问题的，当我们希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符，编译后会在相应的选择器后面增加独有的属性(修改第三方标签样式是父标签包含第三方需要修改的子标签)；如下：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

在这里需要注意的是，有些像 Sass 、scss之类的预处理器无法正确解析 >>>。这种情况下我们可以使用 /deep/ 或 ::v-deep 操作符来取代>>>，在style加上 lang='scss' 表示这是 scss 预处理器，这是两个都是 >>> 的别名，同样可以正常工作。如下：

<style lang='scss' scoped>
.a {
    /deep/ .b{
                /* ... */
    }
}
</style>

这样就可以针对第三方的组件库进行局部样式调整了

---

参考链接：

https://www.cnblogs.com/songForU/p/11176696.html

标签：Vue,样式,deep,第三方,scoped,组件,选择器
来源： https://www.cnblogs.com/2393920029-qq/p/15875002.html