样式穿透有哪些？

使用场景

样式穿透主要应用场景是在项目中运用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>

 

posted @ 2020-12-04 11:09  俩只猫  阅读(982)  评论(0)  编辑  收藏  举报