前言

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

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

scoped分析

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

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

css編譯后，會(huì)在最后一級(jí)選擇器后加一個(gè)屬性選擇器

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

deep分析

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

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

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

如果使用deep：

最終樣式會(huì)被編譯為：

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

使用總結(jié)

所有組件必須加scoped

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

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

父組件覆蓋子組件使用deep

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

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

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

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

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

PS：

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

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

最新評(píng)論