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

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

一、樣式模塊化

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

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

可以看到，vue為我們在不同的組件中的標(biāo)簽上加上了一個獨有的屬性（PostCSS轉(zhuǎn)譯實現(xiàn)）。然后通過屬性選擇器，實現(xiàn)不同屬性的標(biāo)簽樣式互不干擾。

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

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

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

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

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

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

1、外部css文件

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

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

這里注意引入elment css文件和自定義css文件的引入順序，因為css樣式生效是后來者居上的。

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

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()：在子組件定義樣式插槽內(nèi)容樣式

默認(rèn)情況下，作用域樣式不會影響到 <slot/> 渲染出來的內(nèi)容，因為它們被認(rèn)為是父組件所持有并傳遞進(jìn)來的。

<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、動態(tài)css（v-bind）

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

<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標(biāo)簽中，樣式穿透也生效了。

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

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

網(wǎng)站欄目：vue3項目如何使用樣式穿透修改elementUI默認(rèn)樣式
轉(zhuǎn)載源于：http://www.rwnh.cn/article44/jisphe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站收錄、網(wǎng)站策劃、動態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、App設(shè)計

廣告

聲明：本網(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)