1. 层叠样式
    要修改三方ui组件的样式必须先了解css样式的层叠优先级,比较简单来说, !important > 行style > id选择 > 多class选择 > 元素类型选择。
    以elemetn为例,一般组件样式的修改都可以直接通过找到其具体的class名进行调整。以element为例在chorm中查看某个表格的样式:(chorme中支持修改样式属性查看效果,调整前可通过这类方法查看)
    在这里插入图片描述
  2. 找到属性后就可以使用类选择器修改对应的属性,但会发现在vue带有scoped的 style中设定的样式不生效。这是因为scoped的样式只在本组建范围内生效,具体关于scoped的理解,可以参考这篇:https://www.cnblogs.com/goloving/p/9119460.html。
    所有在使用类选择器修改时,如果elemen的子组件是属于本组建的层级之下的,可以使用css穿透,如下所示:
// 对于css
<style scoped>
  .father_class >>> .sub_class {
      with: 20px
  }
</style>

// 对于 scss
<style scoped lang=”scss“>
  .father_class /deep/ .sub_class {
      with: 20px
  }
</style>
  1. 其它特殊情况
    a. 部分特殊情况,如element元素渲染后是 inline style, 则必须在设定属性时加上 !important,如下所示:
<html>
 <body>
    <div class="father_class"  style="width: 200px"> </div>
 </body>
<style>
    .father_class {
         width: 300px !important;  //会覆盖上面200px
    }
</style>
</html>

b. 另一种情况是,对于一些特殊组件,其某些页面渲染完成后, 子组件中部分元素和当前组件并不具有层级关系,直接在的子层级,这种情况,去除style中 scoped关键字即可。

Logo

前往低代码交流专区

更多推荐