vue组件中通过css或scss修改三方组建的style样式

层叠样式要修改三方ui组件的样式必须先了解css样式的层叠优先级，比较简单来说， !important>行style >id选择>多class选择 > 元素类型选择。以elemetn为例，一般组件样式的修改都可以直接通过找到其具体的class名进行调整。以element为例在chorm中查看某个表格的样式：（chorme中支持修改样式属性查看效果，调整前可通过这类方法查看）

qq_41617659

2879人浏览 · 2022-03-18 16:46:05

qq_41617659 · 2022-03-18 16:46:05 发布

层叠样式
要修改三方ui组件的样式必须先了解css样式的层叠优先级，比较简单来说， !important > 行style > id选择 > 多class选择 > 元素类型选择。
以elemetn为例，一般组件样式的修改都可以直接通过找到其具体的class名进行调整。以element为例在chorm中查看某个表格的样式：（chorme中支持修改样式属性查看效果，调整前可通过这类方法查看）
找到属性后就可以使用类选择器修改对应的属性，但会发现在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>

其它特殊情况
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关键字即可。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^