vue的样式穿透

一.为什么要vue的样式穿透

当我们在vue项目中引用到第三方组件时，比如element-ui,常常需要更改某些元素的样式，但如果使用常规的css样式覆盖的方式是经常无效的，那么我们就要用到“样式穿透”的方法。

二.样式穿透原理

我们在写组件样式的时候会将vue单文件组件样式通过scoped进行隔离，这是为了避免多个样式混合，产生样式污染。第三方组件引入进来，通过常规的css样式覆盖是无效的，因为该组件是scoped，父组件是触及不到其内部的样式的。但样式穿透实现让父组件影响子组件的样式

三.如何实现

1. 原生的 >>>

   父组件选择器 >>> 子组件选择器 { 子组件样式 }

   <style scoped>
     /* >>> 只对css原生样式穿透 */
     parent >>> child {
       color: red;
     }
   </style>
   

2. /deep/

   /deep/ 子组件选择器 { 子组件样式 }

    /* /deep/ css/less/sass通用样式穿透 */
     /deep/ h2{
       background-color: #42b983;
     }
   

3. ::v-deep

   ::v-deep 子组件选择器 { 子组件样式 }

   如果你是使用vue2.7以上版本以及包括vue3，::v-deep也会生效，但是会有警告,因为::v-deep已经废弃，应该使用:deep()

    /* ::v-deep css/less/sass通用样式穿透 */
     ::v-deep h2{
       border-radius: 10px;
     }
   

4. :deep()

   :deep(子组件选择器){ 子组件样式 }

    /* :deep() vue3新增  css/less/sass通用样式穿透  */
     :deep(h2){
       font-size: 30px;
     }
   

5. ::v-deep()

::v-deep(子组件选择器){ 子组件样式 }

::v-deep(h2){
    line-height: 50px;
  }

注意：

如果发现样式没有改变，可能是标签嵌套的层级太深,在前边加上父标签能够更准确查找

#root .parent .chilld .element-bautton{ color:red }

总结：

• vue2.7以上版本以及包括vue3，应该使用:deep()
• 其他时候用/deep/即可