Element-ui之修改樣式

修改樣式的方法

1. 官網上面介紹了幾種方法；
2. 固然還有其餘的方法，好比：
   • 直接在標籤上面採用行內式；
     
   • 在組件中的style裏面添加樣式；
     
   • 引入.scss文件（注意：若是是公用樣式最好在index.scss一塊兒引用，而後在main.js中進行調用；若是使用該樣式的組件很少，就按需引入，不要引入其餘沒必要要的scss文件）
     
     注：這兒的優先級是: [行內的樣式>組件中'style'裏面的樣式>引入的scss樣式]， 若是是從外部引入的scss樣式，當修改的標籤樣式是由多個class共同做用時（以下圖），必須加上!important纔會生效

1. 在真正的項目中直接在組件中的style中添加樣式並很差維護（除非真的是本組件特有的樣式），由於不少時候，同一個樣式會利用在項目中的不少地方，好比一個後臺的全部按鈕風格都要同樣，咱們也不可能每個都去設置一下樣式，若是忽然感受顏色不對，豈不是要每一個文件的去修改了，並且有些樣式的設置經過這種方式也未必有效（固然其餘名字的scss也會有一樣的問題，並不老是有效的
2. 因此咱們直接採用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";

1. 而後咱們就能夠快樂的開始修改樣式啦！

修改默認顏色

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

修改el-button的樣式

1. 在處理其餘組件的樣式，咱們一般不會直接進行修改，而是經過交集選擇器的方式限定範圍（若是須要將el-button的各類狀態下的樣式都修改，請按照下面的順序，這和<a>標籤是相同的道理）

.add {
  &.el-button {
    background-color: #666 !important;
    border-color: #666 !important;
  }
  &.el-button:focus {
    background-color: #999 !important;
    border-color: #999 !important;
  }
  &.el-button:hover {
    background-color: #aaa !important;
    border-color: #aaa !important;
  }
  &.el-button:active {
    background-color: #eee !important;
    border-color: #eee !important;
  }
}

1. 在組件裏面進行使用
   • 這種做用域全局的樣式，最好統一在index.scss中引用，而後在main.js引入index.scss

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

   • 而後在el-button中的加上對應的class即可

   <el-button class="add">添加</el-button>

2. 最終效果以下