本篇文章給大家分享的是有關(guān)使用vue-cl如何局部修改Element樣式，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元肇慶做網(wǎng)站,已為上家服務(wù),為肇慶各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

代碼如下：

效果：

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

Element默認(rèn)樣式：

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

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

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

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

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

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

　　最后大功告成，如下：

注意：

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

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

以上就是使用vue-cl如何局部修改Element樣式，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

當(dāng)前標(biāo)題：使用vue-cl如何局部修改Element樣式-創(chuàng)新互聯(lián)
分享路徑：http://chinadenli.net/article18/heigp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、電子商務(wù)、軟件開發(fā)、網(wǎng)站排名、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)