一、樣式模塊化

在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)）。然后通過屬性選擇器，實(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)前的組件，也就是說，該樣式只能適用于當(dāng)前組件元素。通過該屬性，可以使得組件之間的樣式不互相污染。如果一個(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í)也是比較常見的需求，因?yàn)橛械腢I圖并不是使用element組件庫(kù)的組件畫的，所以樣式上肯定存在偏差。
我們來看看el-table

可以看到，element組件的樣式都是通過外部樣式文件實(shí)現(xiàn)的，所以對(duì)應(yīng)的標(biāo)簽上并沒有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樣式生效是后來者居上的。

生效了。
但是這樣其實(shí)是存在問題的： 樣式文件影響了所有組件，也就是我們?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] 樣式無效
    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ì)影響到 <slot/> 渲染出來的內(nèi)容，因?yàn)樗鼈儽徽J(rèn)為是父組件所持有并傳遞進(jìn)來的。

<template>
  <div>
    <slot>插槽</slot>
  </div>
</template>

<style lang="less" scoped>
:slotted(.red) {
  color: red;
}
</style>

4、:global()

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

<style scoped>
:global(.red-box) {
	color: red;
}
</style>
<!-- 等效于 -->
<style>
 .red-box{
     color:red
 }
</style>

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

vue3單文件組件的 <style> 標(biāo)簽支持使用 v-bind CSS 函數(shù)將 CSS 的值鏈接到動(dòng)態(tài)的組件狀態(tài)，也就是我們可以在style標(biāo)簽中引入script標(biāo)簽中的響應(yīng)式變量：

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

const redColor = ref('red')

</script>

<style scoped>
.el-table {
    color: v-bind(redColor);
}
</style>

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

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

到此這篇關(guān)于vue3項(xiàng)目使用樣式穿透修改elementUI默認(rèn)樣式的文章就介紹到這了,更多相關(guān)vue3修改elementUI默認(rèn)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論