vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过一些方法,穿透scoped。
1. 样式穿透 >>>如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改
但如果是sass/less的话可能无法识别,这时候需要使用 /deep/和::v-deep 选择器。
.a { //b是第三方组件类名 >>> .b { background:orange; } } >>。
可以使用/deep/操作符 或者::v-deep ( 都是>>> 的别名)
2. /deep//*用法1*/ .a { //b是第三方组件类名 /deep/ .b { background:orange; } }
/*用法2*/ .a /deep/ .b { background:orange; }
3. ::v-deep/*用法1*/ .a { //b是第三方组件类名 ::v-deep .b { background: orange; } }
/*用法2*/ .a ::v-deep .b { background: orange; }
vue3.0的环境下,安装项目时选择了dart-sass,这个不支持/deep/和>>>的写法,
只能用::v-deep,选择node-sass就不会有这个问题
建议使用第二种方式,·/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.
比如 上图是基于 element-ui 搭建的样式,要想隐藏 图中的小三角, 就要用到样式穿透
虽然三种方法都生效了,但是 >>> 和 /deep/ 显示报错, 所以 强烈推荐 使用 ::v-deep