问题场景:
- 开发中修改第三方组件样式
- 由于 scoped 属性的样式隔离,可能需要去除 scoped、添加!important、另起一个 style
- 这些做法都会带来副作用(组件样式污染、不够优雅)
解决方法:
- 可以使用
>>>
或/deep/
(亲测有效)解决这一问题- 样式穿透在css预处理器中使用才生效
<style scoped>
/deep/ .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
<style scoped>
>>> .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>