Vue修改第三方元件庫樣式問題

2022-09-20 14:12:11 字數 1258 閱讀 2717

問題:使用vue的第三方元件庫(element-ui、antdv)時有時候需要進行區域性樣式調整,使用 /deep/ 進行全域性樣式調整很容易,那麼區域性樣式調整如何實現呢?

1、在vue元件中,在style標籤中新增scoped屬性,這樣在這裡定義的css只作用於當前元件中的元素,可使元件之間的樣式不會相互汙染,使樣式私有化。比如在父元件內使用子元件,父元件的樣式不會滲透到子元件中。

2、在加上scoped後,會為dom節點自動新增乙個唯一的屬性(data-v-f3f3eg9後面這串數字像是獨一無二的hash值),以保證其唯一性。同時在相應的css選擇器末尾,也加上了當前元件的data-v-f3f3eg9屬性,來使其私有化。

轉化後:

使用了scoped後,儘管實現元件樣式的私有化,但在我們實際的專案中,在很多地方使用重複的子元件或其他的樣式庫時,在個別地方需要微調樣式,這個時候不能直接改子元件樣式,而且在父元件裡的樣式又不能滲透到子元件去。這個時候文件中有一句話:

不過乙個子元件的根節點會同時受其父元件的 scoped css 和子元件的 scoped css 的影響。這樣設計是為了讓父元件可以從布局的角度出發,調整其子元件根元素的樣式。

所以還是有辦法解決剛才那個問題的,當我們希望 scoped 樣式中的乙個選擇器能夠作用得「更深」,例如影響子元件,你可以使用 >>> 操作符,編譯後會在相應的選擇器後面增加獨有的屬性(修改第三方標籤樣式是父標籤包含第三方需要修改的子標籤);如下:

上述**將會編譯成:

.a[data-v-f3f3eg9] .b
在這裡需要注意的是,有些像 sass 、scss之類的預處理器無法正確解析 >>>。這種情況下我們可以使用 /deep/ 或 ::v-deep 操作符來取代》,在style加上 lang='scss' 表示這是 scss 預處理器,這是兩個都是 >>> 的別名,同樣可以正常工作。如下:

這樣就可以針對第三方的元件庫進行區域性樣式調整了

第三方元件預設樣式如何修改

當在vue檔案下寫樣式時,為了避免與其他元件樣式汙染,在style標籤上加乙個scoped屬性,但這時,如果想要修改第三方外掛程式的樣式,則會沒有效果。推薦採用以下方案 vue樣式穿透 sass less使用樣式穿透的方式 parent deep childrenstylus的樣式穿透 使用 par...

Vue scoped與覆蓋第三方元件樣式

vue中有很多第三方的ui庫如 elementui iview等,樣式豐富且使用起來很方便,但在真實的使用場景中,我們可能需要在某些地方修改第三方元件的樣式,但是通過傳統方式,修改卻不生效,以下是對於vue scoped的理解,和如何覆蓋第三方元件樣式的總結。1.什麼是scoped?2.如何覆蓋修改...

解決VUE元件內不能更改第三方外掛程式樣式

深度作用選擇器 嚴格來說,這個應該是vue loader的功能。vue loader 12.2.0 在專案開發中,如果業務比較複雜,特別像中颱或b端功能頁面都不可避免的會用到第三方元件庫,產品有時會想對這些元件進行一些ui方面的定製。如果這些元件採用的是有作用域的css,父元件想要定製第三方元件的樣...