局部覆蓋element-ui的默認樣式

最近項目中遇到的問題，只想在某個頁面里面單獨更改element-ui的樣式，而不影響全局

有兩種方法：

新增style標簽

在需要更改的組件里新增一個style標簽【重點：不要加scoped】，然后直接獲取class設置樣式就可以咯，class自己去瀏覽器里右鍵審查元素可得到。

建議：在獲取到的樣式里加上能限制范圍的父層選擇器，不然就變成全局樣式咯。

<style>
  .ruzhu-mess .el-form-item__label{
    font-size:16px!important;
  }
  .zhuanye-mess .el-form-item__label,.zhuanye-mess .color-t{
    font-size:16px!important;
    color:#606266;
  }
</style>

使用 scoped和 >>>進行穿透覆蓋

一樣需要添加一個父層選擇器

<style scoped> 
.charge-success >>> .el-dialog__body {
    height: 85%;
    padding: 5%;
  }
</style>

如果還有興趣學習的可以看下原理講解：

scoped作用：控制style內css的作用域就是當前這個組件，那么它的原理是什么呢？？

scoped的實現原理

vue中的scoped屬性的效果主要通過PostCSS轉譯實現，

如下是轉譯前的vue代碼

<style scoped>
.example {
  color: red;
}
</style>
 
<template>
  <div class="example">hi</div>
</template>

轉譯后

<style>
.example[data-v-5558831a] {
  color: red;
}
</style>
 
<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

即：PostCSS給一個組件中的所有dom添加了一個獨一無二的動態屬性，然后，給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中dom，這種做法使得樣式只作用於含有該屬性的dom——組件內部dom。