在專案開發過程中，為了提高開發效率，使用了element-ui的元件庫，但同時帶來一個問題就是元件的樣式並非我們想要的，通過加id這種方法的能提高元素的部分層級，但是對於一些元件內部通過一些條件新建立的元素，我們控制樣式就比較無能為力了，於是我們考慮修改原始碼。官網上也給我們提供了這樣的條件，
首先，安裝「主題生成工具」，可以全域性安裝或者安裝在當前專案下，這裡以全域性安裝做演示：

npm install element-theme -g
其次，從github或者npm上拉取預設主題：

從 npm
npm i element-theme-default -D

因為是全域性安裝的，所以可以在命令列裡通過et呼叫工具，執行-i初始化變數檔案。
et -i

直接編輯對應的CSS檔案，然後儲存，儲存檔案後，再到命令列執行：
et

（整體修改：可以通過修改 element-variables.css檔案裡的變數，即可改變整體風格。
修改部分原始碼進入:node_modules/element-theme-default/src目錄下修改相應檔案的程式碼即可。）

還有一點值得注意：修改原始碼的時候不會觸發編譯的watch模式，需要手動再儲存一遍 element-variables.css這個檔案才可以觸發編譯效果。

下一步就是將我們修改的引入就可以了，（預設情況下編譯的主題目錄是放在./theme下，你可以通過-o引數指定打包目錄。像引入預設主題一樣，在程式碼裡直接引用theme/index.css檔案即可。）
import ‘../theme/index.css’

這裡說明一下element-ui的樣式寫法：
element-theme-default採用的是下一代CSS風格的開發方式，有幾個顯著特徵：採用var進行全域性樣式變數定義 支援@import引入外部css 支援層級巢狀書寫，支援一些獨特的語法一些獨特的語法列舉如下：

@component-namespace後面跟著的通常是 el，會通知整個元件的class字首渲染為 el
以下的部分是跟在 @component-namespace層級之後,也就是都在 @component-namespace el {...}花括號內。
@b後面跟著的class會渲染為： el-class。例如：@b alert{...
 
}會被渲染為el-alert{...}

@modifier或者 @m後面跟著的class會被渲染為： --class。例如：
@b alert{ @modifier info{...}會被渲染為：el-alert--info{...}
@m warning{...}}會被渲染為：el-alert--warning{...}

@e後面跟著的class會被渲染為： __class。例如：
@b alert{ @e content{...}}會被渲染為：el-alert__content{...}

@when後面跟著的class會被渲染為： .is-class。例如：
@b alert{ @e title{ @when bold {...} }}會被渲染為：el-alert__title.is-bold{...}

@mixin button-size後面跟著四個值，分別代表是padding上下、padding左右，font-size，border-radius。
例如：
@b button{ @mixin button-size 10px 20px 30px 40px;}
會被渲染為
.el-button{ padding: 10px 20px; font-size: 30px; border-radius: 40px;}

@mixin button-variant後面跟著3個值，分別代表color、background-color、border-color。同時還會渲染一系列的hover/active/focus等顏色的深淺變化。
例如：
@b button { @mixin button-variant white blue black;}
會被渲染為：
.el-button{ color: white; background-color: blue; border-color: black;}
.el-button:hover,.el-button:focus{...}/ 一系列顏色變化 /......

tint()和 shade()函式，分別用來使顏色提升亮度、顏色降低亮度用的。接受兩個引數，第一個是顏色值，第二個是明暗百分比。
例如：
.foo { color: tint(#BADA55, 42%)}會被渲染為：.foo { color: #e2efb7}
.bar { background-color: shade(#663399, 42%)}會被渲染為：.bar { background-color: #2a1540}