修改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}