這兩天在使用Element UI寫頁面時，想要在檔案內部修改Element UI元素的style，但沒能成功，最後發現犯了一個低階錯誤，然後通過深度選擇器實現了檔案內元素style的覆蓋，但深度選擇器並不推薦使用。之後偶然發現，原因是修改的style未放在自定義的Element UI類名下，導致無法覆蓋自帶樣式，特此立貼總結元件庫style替換的集中方法：

文章目錄

• • 法一 新增class（推薦）
  • 法二 全域性樣式修改
  • 法三 深度選擇器
  • 總結

法一 新增class（推薦）

在需要的 el 元件上增加自己的class，並在該class下寫入替換樣式。

.myClass {
 .el-menu{
    	background-color: #f5f5f5;
    	padding:0;
    }
}
 

正常來說，導航欄下會有多個menu，如果過希望修改一個menu背景顏色，而其他預設，可以如下操作（當然有多個市也可以新增自定義class進行樣式覆蓋）

.myClass{
    .needChangeBgc1{
      .el-menu{
        background-color: #f5f5f5;
      }
    .needChangeBgc2{
      .el-menu{
        background-color: #effef5;
      }
    }
}

法二 全域性樣式修改

全域性的 element-ui 樣式修改可以在 @/src/styles/element-ui.scss 中進行設定修改。

法三 深度選擇器

使用深度作用選擇器，表示會對myClass下的所有el-menu執行樣式

.myClass >>>. el-menu{
    	background-color: #f5f5f5;
}

有些前處理器（ Sass 之類的前處理器無法正確解析 >>>），這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

.myClass /deep/ . el-menu{
    	background-color: #f5f5f5;
}
 

總結

對個別標籤個性化使用時，推薦使用第一種，雖然這次犯了錯誤，羞人哦；
全域性對標籤樣式修改時，推薦第二種，更方便；
而，>>>和 /deep/ 都是深度遍歷所有的符合情況的標籤，可以看情況使用。