elementUI组件修改样式 覆盖无效
为了vue页面样式模块化，不对全局样式造成污染，我们往往都会加入scoped属性用来限制样式的作用域，然而这也会导致当我们修改部分ui组件样式失效。为了避免这种情况，我们常用以下方式来解决。通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值。在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改。深度选择器/deep/与>>>作用相同。
·
在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改。
为了vue页面样式模块化，不对全局样式造成污染，我们往往都会加入scoped属性用来限制样式的作用域，然而这也会导致当我们修改部分ui组件样式失效。为了避免这种情况，我们常用以下方式来解决。
一、深度作用选择器（ >>> ）
<style scoped>
.box >>> .content {
font-size:20px;
}
</style>二、/deep/ 预处理器less下使用
深度选择器/deep/与>>>作用相同
通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值
<style scoped lang="less">
.select {
/deep/ .ivu-card-body {
width: 100%;
}
}
</style>
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献17条内容
所有评论(0)