修改elementUi預設樣式不影響全域性樣式

2021-09-24 14:29:31 字數 491 閱讀 9537

1.vue scoped 深度作用選擇器

希望scoped樣式中的乙個選擇器能夠作用得「更深」,例如影響子元件,可以使用>>>操作符:

.userinfo >>> .el-form-item__label

font-size: $font-size-medium

color: $color-mainfont

font-weight: 500

margin-bottom: 20px

padding: 0

sass和less無法正確解析》,可以使用/deep/ 替換,同樣可以有作用

2.不太推薦的一種方法

定義乙個含有scoped屬性的style標籤之外,再定義乙個不含有scoped屬性的style標籤(個人建議使用第一種方法)

如何修改elementUI的預設樣式

在開發中我們發現修改elementui樣式的時候,新增了scoped的元件修改樣式是無效的。首先我們要了解一下scoped是什麼?官網是這樣說的 當 style 標籤有scoped屬性時,他的css只作用於當前元件的元素。使用scoped後,父元件的樣式不會滲透到子元件中。不過乙個子元件的根節點會同...

ElementUI修改預設樣式,又不影響到其他元件

el table th cell el table td cell style 注意,一定不要寫 scoped 因為是這私有的。這樣就覆蓋不了element ui的樣式了,層級不夠高 但是這麼寫也有乙個弊端。會覆蓋所有的頁面同類名的,css全域性的汙染 不過還是有解決方法的 colorbox 123...

一看就會之ElementUI修改預設樣式

通過 style修改,用於區域性元件塊 style selfstyle 預設按鈕el button export default script 注意 此時該樣式會汙染全域性樣式,可以把它放在公共的css裡 為了不讓所有的 el table 標籤都是該樣式,可以在html給要改的 table 加上乙個...