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;
}