修改樣式的方法

1. 官網上面介紹了幾種方法；
2. 當然還有其他的方法，比如直接在vue文件的style裏面設置樣式進行覆蓋，或者引入其他的scss文件（誰說的一定要引入variables.scss，我偏不信），下面為直接在style中通過選擇器進行覆蓋的樣子，結果也是有效的
   
3. 經過一段時間的使用，發現直接在style中添加樣式並不好維護，因為很多時候，同一個樣式會利用在項目中的很多地方，比如一個後臺的所有按鈕風格都要一樣，我們也不可能每一個都去設置一下樣式，如果突然感覺顏色不對，豈不是要每個文件的去修改了，而且有些樣式的設置通過這種方式也未必有效（當然其他名字的scss也會有同樣的問題，並不總是有效的）
4. 所以我們直接采用element-variables.scss的方法，在src目錄下創建common->styles->element-variables.scss目錄；
   

基本設置

1. 首先要對引入的element-variables.scss進行基本設置

   $--font-path: ‘~element-ui/lib/theme-chalk/fonts‘;
   @import "~element-ui/packages/theme-chalk/src/index";

   

2. 然後我們就可以快樂的開始修改樣式啦！

修改默認顏色

1. Element-ui的默認顏色是鮮艷、友好的藍色，當我們需要修改整體風格的顏色時，只需要在element-variables.scss
   裏添加一條簡單的代碼，$的這種寫法是scss裏對變量的修飾符。
   

修改button的樣式

1. 在處理其他組件的樣式，我們通常不會直接進行修改，而是通過交集選擇器的方式限定範圍，如下圖（註意，這兒的限制選擇器放到默認的樣式後面，可以更好的進行維護）

   .el-button.edit {
     color: #fff;
     background-color: #333;
   }
   .el-button.add {
     color: #fff;
     background-color: #666;
   }
   .el-button.delete {
     color: #fff;
     background-color: #999;
   }
    
   

2. 在組件裏面進行使用

   • 首先引入element-variables.scss文件

     <style rel="stylesheet/scss" lang="scss" scoped>
     @import "~@/common/styles/element-variables.scss";
     </style>

   • 在遍歷裏面加入class便可完成樣式的修改

     <el-button class="edit">編輯</el-button>
     <el-button class="add">添加</el-button>
     <el-button class="delete">刪除</el-button>

3. 最終效果如下
   

Element-ui之修改樣式