vue单文件中scoped样式如何穿透？

　　在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

　　但当引用第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。处理方式如下：

　　第一种方式：

　　　　（1）使用 >>> 操作符

　　　　　　　　外层 >>> 第三方组件 { 样式 }

　　　　　　.a >>> .b { /* ... */ }

　　　　　　　</style>

　　　　（2）使用 /deep/ 操作符

　　　　　　　　当使用 sass/scss之类的预处理器无法正确解析 >>>，可以使用deep/ 操作符

　　　　　　　　外层 /deep/ 第三方组件 { 样式 }

　　　　　　.a /deep/ .b { /* ... */ }

　　　　　　　</style>

巴特西

vue单文件中scoped样式如何穿透？

最新文章

热门文章