CSS样式穿透

父组件的 scoped 样式不能穿透到子组件上:

<div class="formItem">
    <el-input class="input" placeholder="您的手机号" v-model="phone"></el-input>
</div>

当前页面无法修改这个input输入框的样式,因为它是个组件,input在这个组件内部;由于scoped作用域的限制,当前页面的样式无法作用到子组件上。但如果使用 /deep/ 或 >>> 能就使用样式穿透到子组件中去;如:

.formItem >>> input{
  // ...
}



Vue支持的样式穿透方式有如下三种:

1、>>>

scss等预处理器无法解析 >>> ,因此不推荐使用此方式

<style lang="css" scoped>
.a >>> .b { 
   /* ... */ 
}
</style>

2、/deep/

在vue-cli3编译时,/deep/ 可能会报错或警告,因此不推荐使用

<style lang="scss" scoped>
.a{
   /deep/ .b { 
      /* ... */ 
   }
} 
</style>

3、::v-deep

最新的样式穿透方式,可以被scss等处理器解析,推荐使用

<style lang="scss" scoped>
.a{
   ::v-deep .b { 
      /* ... */ 
   }
} 
</style

4. :deep

在Vue3中 ::v-deep 也会报警告,Vue3中最新推荐使用 :deep

:deep(.el-input) {
   width: 200px;
   height: 40px;
}



举报

© 著作权归作者所有


0