vue3項目怎麼使用樣式穿透修改elementUI預設樣式

一、樣式模組化

在css單檔中，我們在style標籤中寫組件的樣式，可以看到，一般style標籤都會帶上一個scoped屬性，這樣可以實現及時不同組件選擇器一樣，但是樣式互不干擾。

看一個例子，我們在兩個元件中都定義一個hello-world-box類，在對應的scope標籤中設定不同的樣式。

可以看到，vue為我們在不同的元件中的標籤加上了一個獨有的屬性（PostCSS轉譯實作）。然後透過屬性選擇器，實現不同屬性的標籤樣式互不干擾。

css屬性選擇器的作用是：為具有特定屬性的 HTML 元素設定樣式

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

這也是style標籤scoped屬性實作樣式模組化的原理。
當一個style標籤擁有scoped屬性時，它的CSS樣式就只能作用於目前的組件，也就是說，該樣式只能適用於目前組件元素。透過此屬性，可以使得組件之間的樣式不互相污染。如果一個專案中的所有style標籤全部加上了scoped，相當於實現了樣式的模組化。

二、樣式穿透實作

了解了vue中樣式模組化的實現，進入正題，如何實現自訂elmentUI元件庫中元件的樣式呢？
這其實也是比較常見的需求，因為有的UI圖並不是使用element元件庫的元件畫的，所以樣式上一定有偏差。
我們來看看el-table

可以看到，element元件的樣式都是透過外部樣式檔案實現的，所以對應的標籤上並沒有vue加上的屬性。
那麼我們直接在使用elment元件的元件中加上樣式，是不會生效的，外部匯入的樣式檔案優先權更高。

1、外部css文件

我們可以自己定義一個css文件，然後書寫對應的要修改的樣式。
例如：styles.css

在入口檔main.js中引入:

這裡注意引入elment css檔案和自訂css檔案的引入順序，因為css樣式生效是後來者居上的。

生效了。
但是這樣其實是存在問題的： 樣式檔案影響了所有元件，也就是我們在其他頁面中呼叫這個元件，樣式也被修改了。
解決辦法之一就是在元件對應的類別上在套件上一層自訂的類別名稱。

2、:deep()

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

.outer {
  .el-input__inner {
    // 此时css解析的为 .outer .el-input__inner[data-v-xxxx] 样式无效
    background: pink;
  }

  :deep(.el-input__inner) {
    // 此时css解析的为 .outer[data-v-xxxx] .el-input__inner 样式生效
    background: red;
  }
}

3、:slotted()

:slotted()：在子元件定義樣式插槽內容樣式

預設情況下，作用域樣式不會影響到<slot></slot> 渲染出來的內容，因為它們被認為是父元件所持有並傳遞進來的。

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

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

4、:global()

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

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

5、動態css（v-bind）

vue3單一檔案元件的<style></style> 標籤支援使用v-bind CSS 函數將CSS 的值連結到動態的元件狀態，也就是我們可以在style標籤中引入script標籤中的響應式變數：

<template>
    <el-table :data="tableData" >
        <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 &#39;vue&#39;;

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

const redColor = ref(&#39;red&#39;)

</script>

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

可以看到，即使在scoped的style標籤中，樣式穿透也生效了。

實際的值會被編譯成雜湊化的 CSS 自訂屬性，因此 CSS 本身仍然是靜態的。自訂屬性會透過內聯樣式的方式套用到元件的根元素上，並且在來源值變更的時候會響應式地更新。

以上是vue3項目怎麼使用樣式穿透修改elementUI預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！