了解 vue组件样式穿透 /deep/ ::v-deep ＞＞＞ 区别 ===

什么是样式穿透?

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过一些方法，穿透scoped。

1.  样式穿透     >>>

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

但如果是sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。

<style scoped>
   .a {
     //b是第三方组件类名
      >>> .b {
        background:orange;
        }
 }
</st
</style>
 

有些Sass 、Less之类的预处理器无法正确解析 >>>。

可以使用/deep/操作符 或者::v-deep   ( 都是>>> 的别名)

2.  /deep/

<style lang="sass" scoped>
 /*用法1*/
  .a {
 //b是第三方组件类名
    /deep/ .b {
       background:orange;
      }
  }

    /*用法2*/
    .a /deep/ .b { 
          background:orange;
     }
</style>
 

3. ::v-deep

<style lang="scss" scoped>
 /*用法1*/
  .a {
     //b是第三方组件类名
      ::v-deep .b {
            background: orange;
        }
  }

 /*用法2*/
 .a ::v-deep .b {
   background: orange;
 }

</style>
 

vue3.0的环境下，安装项目时选择了dart-sass，这个不支持/deep/和>>>的写法，

只能用::v-deep，选择node-sass就不会有这个问题

建议使用第二种方式,·/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.

比如 上图是基于 element-ui 搭建的样式,要想隐藏 图中的小三角, 就要用到样式穿透

 

 

 

 虽然三种方法都生效了,但是 >>> 和 /deep/ 显示报错, 所以 强烈推荐 使用 ::v-deep