這篇文章主要講解了“vue3項(xiàng)目如何使用樣式穿透修改elementUI默認(rèn)樣式”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue3項(xiàng)目如何使用樣式穿透修改elementUI默認(rèn)樣式”吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比黑山網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式黑山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋黑山地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

一、樣式模塊化

在css單文件中，我們?cè)趕tyle標(biāo)簽中寫組件的樣式，可以看到，一般style標(biāo)簽都會(huì)帶上一個(gè)scoped屬性，這樣可以實(shí)現(xiàn)及時(shí)不同組件選擇器一樣，但是樣式互不干擾。

看一個(gè)例子，我們?cè)趦蓚€(gè)組件中都定義一個(gè)hello-world-box類，在對(duì)應(yīng)的scope標(biāo)簽中設(shè)置不同的樣式。

可以看到，vue為我們?cè)诓煌慕M件中的標(biāo)簽上加上了一個(gè)獨(dú)有的屬性（PostCSS轉(zhuǎn)譯實(shí)現(xiàn)）。然后通過(guò)屬性選擇器，實(shí)現(xiàn)不同屬性的標(biāo)簽樣式互不干擾。

css屬性選擇器的作用是：為帶有特定屬性的 HTML 元素設(shè)置樣式

.hello-world-box[data-v-e17ea971] {
    color: red;
}

這也是style標(biāo)簽scoped屬性實(shí)現(xiàn)樣式模塊化的原理。
當(dāng)一個(gè)style標(biāo)簽擁有scoped屬性時(shí)，它的CSS樣式就只能作用于當(dāng)前的組件，也就是說(shuō)，該樣式只能適用于當(dāng)前組件元素。通過(guò)該屬性，可以使得組件之間的樣式不互相污染。如果一個(gè)項(xiàng)目中的所有style標(biāo)簽全部加上了scoped，相當(dāng)于實(shí)現(xiàn)了樣式的模塊化。

二、樣式穿透實(shí)現(xiàn)

了解了vue中樣式模塊化的實(shí)現(xiàn)，進(jìn)入正題，如何實(shí)現(xiàn)自定義elmentUI組件庫(kù)中組件的樣式呢？
這其實(shí)也是比較常見(jiàn)的需求，因?yàn)橛械腢I圖并不是使用element組件庫(kù)的組件畫的，所以樣式上肯定存在偏差。
我們來(lái)看看el-table

可以看到，element組件的樣式都是通過(guò)外部樣式文件實(shí)現(xiàn)的，所以對(duì)應(yīng)的標(biāo)簽上并沒(méi)有vue加上的屬性。
那么我們直接在使用elment組件的組件中加上樣式，是不會(huì)生效的，外部導(dǎo)入的樣式文件優(yōu)先級(jí)更高。

1、外部css文件

我們可以自己定義一個(gè)css文件，然后書寫對(duì)應(yīng)的要修改的樣式。
例如：styles.css

在入口文件main.js中引入:

這里注意引入elment css文件和自定義css文件的引入順序，因?yàn)閏ss樣式生效是后來(lái)者居上的。

生效了。
但是這樣其實(shí)是存在問(wèn)題的： 樣式文件影響了所有組件，也就是我們?cè)谄渌?yè)面中調(diào)用這個(gè)組件，樣式也被修改了。
解決辦法之一就是在組件對(duì)應(yīng)的類上在包上一層自定義的類名。

2、:deep()

:deep()：改變css解析時(shí)私有屬性的位置

.outer {
  .el-input__inner {
    // 此時(shí)css解析的為 .outer .el-input__inner[data-v-xxxx] 樣式無(wú)效
    background: pink;
  }

  :deep(.el-input__inner) {
    // 此時(shí)css解析的為 .outer[data-v-xxxx] .el-input__inner 樣式生效
    background: red;
  }
}

3、:slotted()

:slotted()：在子組件定義樣式插槽內(nèi)容樣式

默認(rèn)情況下，作用域樣式不會(huì)影響到 渲染出來(lái)的內(nèi)容，因?yàn)樗鼈儽徽J(rèn)為是父組件所持有并傳遞進(jìn)來(lái)的。

:slotted(.red) {
  color: red;
}

4、:global()

:global() ：全局選擇器，定義全局樣式，不用單開(kāi)一個(gè)沒(méi)有scoped的style。

:global(.red-box) {
	color: red;
}

5、動(dòng)態(tài)css（v-bind）

vue3單文件組件的

可以看到，即使在帶scoped的style標(biāo)簽中，樣式穿透也生效了。

實(shí)際的值會(huì)被編譯成哈?；?CSS 自定義屬性，因此 CSS 本身仍然是靜態(tài)的。自定義屬性會(huì)通過(guò)內(nèi)聯(lián)樣式的方式應(yīng)用到組件的根元素上，并且在源值變更的時(shí)候響應(yīng)式地更新。

感謝各位的閱讀，以上就是“vue3項(xiàng)目如何使用樣式穿透修改elementUI默認(rèn)樣式”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue3項(xiàng)目如何使用樣式穿透修改elementUI默認(rèn)樣式這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！