elementUI组件修改样式 覆盖无效

在我们使用第三方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>

--------------------- 
作者:zqian1994 
来源:CSDN 
原文:https://blog.csdn.net/zqian1994/article/details/83899919 
版权声明:本文为博主原创文章,转载请附上博文链接!

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读