ElementUI组件修改样式覆盖无效

在使用ElementUI组件库开发时往往会需要对组件进行样式修改 , 为了 Vue 页面样式模块化 , 不对全局样式造成污染 , 我们往往都会加入 scoped 属性用来限制样式的作用域 , 然后这也会导致当我们修改部分 UI 组件样式失效.

为了避免这种问题 , 我们常用以下方式来解决

1. 深度作用选择器

>>>

1
2
3
4
5
<style scoped>
.box >>> .content {
font-size:20px;
}
</style>

2. /deep/ 预处理器 less 下使用

深度选择器 /deep/>>> 作用相同

通过 >>> 可以使得在使用 scoped 属性的情况下 , 穿透 scoped , 修改其他组件的值

1
2
3
4
5
6
7
<style scoped lang="less">
.select {
/deep/ .ivu-card-body {
width: 100%;
}
}
</style>

参考链接

CSDN:elementUI组件修改样式 覆盖无效

0%