vue3項目如何使用樣式穿透修改elementUI默認樣式

這篇文章主要講解了“vue3項目如何使用樣式穿透修改elementUI默認樣式”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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/> 渲染出來的內容，因為它們被認為是父組件所持有并傳遞進來的。

<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> 標簽支持使用 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 '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標簽中，樣式穿透也生效了。

實際的值會被編譯成哈希化的 CSS 自定義屬性，因此 CSS 本身仍然是靜態的。自定義屬性會通過內聯樣式的方式應用到組件的根元素上，并且在源值變更的時候響應式地更新。

感謝各位的閱讀，以上就是“vue3項目如何使用樣式穿透修改elementUI默認樣式”的內容了，經過本文的學習后，相信大家對vue3項目如何使用樣式穿透修改elementUI默認樣式這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！