ElementUI自定義CSS樣式不生效的解決方案

2021-10-10 21:38:16 字數 805 閱讀 3021

例如有乙個輸入框

ref=

"mysearch"

class

="mysearch"

size

="small"

placeholder

="請輸入內容"

suffix-icon

="el-icon-search"

v-model

="input1"

>

el-input

>

如果沒有加自定義樣式則輸入框大概是這樣的

我希望是這樣的

通過谷歌瀏覽器的開發者工具,找到對應樣式的類名為.el-input__inner

但發現再html中前面的el-input標籤解析成了這個,其中mysearch是自己新增上去的,因此我們可以找到mysearch的元素,需要修改的是子元素類名是.el-input__inner

如果之間通過css的選擇器選擇子元素則不能作用到子內部的元素

下面使用了stylus語法的寫法

下面是錯誤的寫法:

element ui全域性自定義主題

需要注意的是建立element variables.scss檔案在 src 下,注意路徑問題 element 的 theme chalk 使用 scss 編寫,如果你的專案也使用了 scss,那麼可以直接在專案中改變 element 的樣式變數。新建乙個樣式檔案,例如element variable...

Element ui前端自定義排序

1.在需要自定義排序的列上 el table column 加上sortable cistom 2.在el table上增加sort change事件,監聽列的排序 定義需要排序的列,這樣可以省去多個if else if const actions new map votes votes calcw...

element ui自定義表單驗證

1.首先我們要在form表單元素上繫結rules和model這兩個屬性,rules代表你的自定義表單驗證規則,model代表你需要驗證的資料。2.在表單裡繫結的值一定是model繫結的資料裡的某個值,我們需要驗證哪個字段,就在哪個el form item標籤上繫結prop屬性,值為你自定義規則裡對應...