1. 程式人生 > >修改element-ui元件樣式

修改element-ui元件樣式

在專案開發過程中,為了提高開發效率,使用了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}