在vue项目中修改elementUI的组件样式
使用 >>> 操作符
<style lang="stylus" scoped>
.a >>> .b { /* ... */ }
</style>
使用 /deep/ 或 ::v-deep 操作符
<style lang="less" scoped>
.a{
/deep/ .b{
···
}
}
.a{
::v-deep .b{
···
}
}
</style>
产生原因
当 ‘style’ 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素,他控制不了自身的子组件。
备注
有些像 Less、Sass 之类的预处理器无法正确解析 >>>。这种情况下可以使用 /deep/ 或 ::v-deep 操作符取而代之(两者都是 >>> 的别名),同样可以正常工作。