前言

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

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

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選擇器來避免對其他組件禪城影響，這樣也可以達(dá)到效果，而且修改子組件樣式的話會比較簡單，但是自定義的id沒辦法全局管理，難以避免id重復(fù)的問題。

父組件覆蓋子組件使用deep

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

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

比如父元素為.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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論