在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。
但当引用第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped。处理方式如下:
第一种方式:
(1)使用 >>> 操作符
外层 >>> 第三方组件 { 样式 }
<style scoped>
.a >>> .b { /* ... */ }
</style>
(2)使用 /deep/ 操作符
当使用 sass/scss之类的预处理器无法正确解析 >>>,可以使用/deep/ 操作符或者::v-deep
外层 /deep/ 第三方组件 { 样式 }
<style scoped>
.a /deep/ .b { /* ... */ }
</style>