样式穿透有哪些?

样式穿透主要应用场景是在项目中运用UI组件库后要改动其内在样式,因此采用深度选择器

1、>>>

如果项目使用的是css原生样式,那么可以直接使用 >>> 穿透修改

写法原理:

外层>>>第三方组件 {

​ css代码

}

2、/deep/

项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
注意:vue-cli3以上版本不可以

写法原理

外层/deep/第三方组件 {

​ css代码

}

3、::v-deep

写法原理:

外层::v-deep第三方组件 {

​ css代码

}

 1 <style lang="scss" scoped>
 2 /*用法1*/
 3 .a{
 4  ::v-deep .b { 
 5   /* ... */
 6  }
 7 } 
 8 /*用法2*/
 9 .a ::v-deep .b {
10   /* ... */
11 }
12 </style>
原文地址:https://www.cnblogs.com/liazhimao/p/14084738.html