最近在做vue專案時用到了Element，發現這玩意兒用起來很舒服，很新穎，上手也很快，而且效果足夠酷炫。但是後面發現一個很大的問題，那就是Element的樣式有限，這極大地限制了專案的應用廣度，所以我們有必要對Element內部的CSS進行一定的覆蓋，來改變其樣式。在修改Element樣式時，遇到了一些問題，這裡簡單做一些記錄，便於以後查閱。

　　我在用el-switch做開關切換時，使用預設樣式：

程式碼如下：

效果：

　　現在我想把藍色字型改為其他顏色，但是我發現無論我如何修改樣式，介面始終沒有任何變化，所以我想到可能是需要覆蓋Element預設的el-switch樣式。於是，我找呀找，找呀找，終於在node_modules/element-ui/lib/theme-chalk下找到了對應的預設樣式，如下所示：

Element預設樣式：

　　於是，我想著把，這下問題能解決了，我開開心心地在自己的元件裡把對應的樣式覆蓋了：

　　我雞凍的點了一下重新整理，發現並沒有什麼卵用，還是以前熟悉的面孔：

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

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

　　驚喜之餘，我發現，這種修改方式存在一個bug，那就是其他頁面的樣式同時也會被修改成這種樣式。我忽的想起，style標籤上新增的scoped屬性，是表示它的樣式作用於當下的模組，很好的實現了樣式私有化的目的。如果不加scoped屬性，這個樣式就具有全域性屬性。因此，一旦在不加scoped屬性的情況下，樣式被覆蓋，那麼整個專案使用到該標籤時的樣式都會跟著被覆蓋。

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

　　最後大功告成，如下：

注意：

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

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

以上就是vue-cli —— 如何區域性修改Element樣式的詳細內容，更多關於vue 修改Element樣式的資料請關注我們其它相關文章！