最近在做vue項(xiàng)目時(shí)用到了Element，發(fā)現(xiàn)這玩意兒用起來(lái)很舒服，很新穎，上手也很快，而且效果足夠酷炫。但是后面發(fā)現(xiàn)一個(gè)很大的問(wèn)題，那就是Element的樣式有限，這極大地限制了項(xiàng)目的應(yīng)用廣度，所以我們有必要對(duì)Element內(nèi)部的CSS進(jìn)行一定的覆蓋，來(lái)改變其樣式。在修改Element樣式時(shí)，遇到了一些問(wèn)題，這里簡(jiǎn)單做一些記錄，便于以后查閱。

　　我在用el-switch做開(kāi)關(guān)切換時(shí)，使用默認(rèn)樣式：

代碼如下：

效果：

　　現(xiàn)在我想把藍(lán)色字體改為其他顏色，但是我發(fā)現(xiàn)無(wú)論我如何修改樣式，界面始終沒(méi)有任何變化，所以我想到可能是需要覆蓋Element默認(rèn)的el-switch樣式。于是，我找呀找，找呀找，終于在node_modules/element-ui/lib/theme-chalk下找到了對(duì)應(yīng)的默認(rèn)樣式，如下所示：

Element默認(rèn)樣式：

　　于是，我想著把，這下問(wèn)題能解決了，我開(kāi)開(kāi)心心地在自己的組件里把對(duì)應(yīng)的樣式覆蓋了：

　　我雞凍的點(diǎn)了一下刷新，發(fā)現(xiàn)并沒(méi)有什么卵用，還是以前熟悉的面孔：

　　我不服氣，繼續(xù)百度，似乎看到一絲曙光，按照網(wǎng)上說(shuō)的，在樣式的color后面加了 !important ，然后心情美麗地刷新了一下，還是老樣子，我一個(gè)七尺男兒簡(jiǎn)直想哭，崩了.....

　　我仍不死心，繼續(xù)找度娘，終于老天不負(fù)有心人，我get到了我的寶貝，把樣式單獨(dú)寫(xiě)在外面就成功了。

　　驚喜之余，我發(fā)現(xiàn)，這種修改方式存在一個(gè)bug，那就是其他頁(yè)面的樣式同時(shí)也會(huì)被修改成這種樣式。我忽的想起，style標(biāo)簽上添加的scoped屬性，是表示它的樣式作用于當(dāng)下的模塊，很好的實(shí)現(xiàn)了樣式私有化的目的。如果不加scoped屬性，這個(gè)樣式就具有全局屬性。因此，一旦在不加scoped屬性的情況下，樣式被覆蓋，那么整個(gè)項(xiàng)目使用到該標(biāo)簽時(shí)的樣式都會(huì)跟著被覆蓋。

　　所以問(wèn)題又來(lái)了，如何讓該覆蓋樣式只在當(dāng)下組件起作用呢？問(wèn)誰(shuí)呢？繼續(xù)找度娘唄.......(才疏學(xué)淺，只會(huì)度娘....)，找啊找，找啊找，費(fèi)了好大勁，終于找到了答案。就是簡(jiǎn)單地用scoped和>>>符號(hào)進(jìn)行穿透。何謂穿透？(引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。這時(shí)就要通過(guò)特殊的方式，來(lái)穿透scoped。)

　　最后大功告成，如下：

注意：

1.這里的  >>> 可以用 /deep/ 替換掉，這里的 /deep/ 操作符是 >>> 的別名，同樣也可以正常工作。

2.這里的 !important 不加其實(shí)也沒(méi)毛病，但是因?yàn)檫@是使用第三方庫(kù)的樣式，所以在覆蓋樣式時(shí)最好加上 !important ，這樣才能指明優(yōu)先級(jí)。

以上就是vue-cli —— 如何局部修改Element樣式的詳細(xì)內(nèi)容，更多關(guān)于vue 修改Element樣式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論