前言

在項目開發(fā)過程中，經(jīng)常會遇到需要在父組件內(nèi)部覆蓋子組件樣式的場景，這種場景在使用第三方庫開發(fā)時更為常見。

如何處理好全局樣式和局部樣式對于長期更新維護的項目來說是非常重要的。

scoped分析

對于SPA項目，只有一個頁面，頁面內(nèi)容被拆分成了一個個組件，組件加載完成后，組件的樣式也都加載在同一個頁面內(nèi)，所以這些組件的樣式都可以看成全局樣式，對其他組件都有效，要避免當(dāng)前組件的樣式對其他組件產(chǎn)生污染，就要把每個組件的樣式獨立開。

如果style添加scoped，當(dāng)前組件所有標(biāo)簽都會添加一個data-v-hash的屬性，hash值每個組件都不同

css編譯后，會在最后一級選擇器后加一個屬性選擇器

這樣每個組件都有唯一的屬性選擇器，就可以避免對其他組件產(chǎn)生影響

deep分析

deep是常用來樣式穿透，覆蓋子組件加了scoped的樣式或者第三方組件的樣式。

上圖中span為子組件，父組件樣式加了scoped，子組件只有最外層元素添加了父組件的data-v-hash屬性，如果只是需改最外層元素樣式，不需要加deep，但是如果修改內(nèi)部元素，直接使用類選擇器是無效的。比如通過父元素類型panel修改類名ant-input的元素，最終的樣式被編譯為

子組件內(nèi)部元素沒有data-v-hash屬性，所以樣式不生效。

如果使用deep：

最終樣式會被編譯為：

屬性選擇器只加在deep前的元素上，因此會影響子組件樣式。

使用總結(jié)

所有組件必須加scoped

如果沒有加scoped？ 打開一個界面突然發(fā)現(xiàn)A組件樣式被其他組件權(quán)重更高的樣式覆蓋了，然后為了讓A原本的樣式生效，給A原本的樣式加個更大的權(quán)重，接著又發(fā)現(xiàn)在B組件內(nèi)部原本要覆蓋A組件的一些樣式，因為A組件樣式權(quán)重變大而失效了。如果組件層級很深，子組件的最終樣式來源可能要向上翻十八輩祖宗啊，真一點不夸張。

當(dāng)然也有同學(xué)喜歡不加scoped，樣式最外層加個唯一的id選擇器來避免對其他組件禪城影響，這樣也可以達到效果，而且修改子組件樣式的話會比較簡單，但是自定義的id沒辦法全局管理，難以避免id重復(fù)的問題。

父組件覆蓋子組件使用deep

第三方庫一般會有全局樣式覆蓋，不過是針對全局的樣式，局部樣式還是不要放在common.less里。使用deep需要注意兩點：

1、給組件額外加個類名，使用當(dāng)前組件自定義類型進行樣式覆蓋

比如父元素為.father，如果覆蓋ant design vue 的select組件，select組件最外層元素為.ant-select，我們直接使用.father /deep/ .ant-select { color: wisdom } 這樣是可以生效的，但是對于.father下的所有子組件以及子孫后代組件，只要使用了select組件，{ color: wisdom }這個樣式都是有效的，這樣顯然也不合理，為了不影響后代的組件，給select加個跟當(dāng)前業(yè)務(wù)相關(guān)的類名，使用自定義類名覆蓋樣式，如.father /deep/ .father-child-select { ... }。PS：我也嘗試過使用>選擇器加/deep/一起使用，奈何無效。

2、/deep/ 嵌套使用在新版chrome瀏覽器樣式會失效，避免嵌套使用

以前嵌套使用是沒問題的，后來遇到某個版本樣式失效了

PS：

樣式覆蓋只要選擇器匹配上了，其他無非是權(quán)重問題，組件慎用!important

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論