vue组件中,在style设置为scoped的时候,里面在写样式对子组件是不生效的,如果想让某些样式对所以子组件都生效,可以通过样式渗透来更改插件样式

122 阅读1分钟

方式一 :/deep/ 深度选择器

 
.wrap{
 
  .class1{
 
      font-size:12px;
 
  }
 
    /deep/ .class2{
 
       font-size:20px; //对所有子组件生效.
 
        /deep/ .class3{   }  //没有必要写多层deep 父类有deep后子类自动也会深度选择 并且这么写在firfox里会失效
 
    }
 
}

当使用UI插件时也可以使用 /deep/ 来更改插件里的样式

方式二:通过 >>> 穿透scoped

<style scoped>
    外层 >>> 第三方组件类名{
        样式
    }
</style>

有些Sass 、Less之类的预处理器无法正确解析 >>>。可以使用 /deep/操作符( >>> 的别名)

Thanks♪(・ω・)ノ