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

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

代碼如下：

效果：

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

Element默認樣式：

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

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

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

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

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

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

　　最后大功告成，如下：

注意：

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

2.這里的 !important 不加其實也沒毛病，但是因為這是使用第三方庫的樣式，所以在覆蓋樣式時最好加上 !important ，這樣才能指明優(yōu)先級。

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

最新評論