Cara menggunakan penembusan gaya untuk mengubah suai gaya lalai elementUI dalam projek vue3

1. Pemodulasi gaya

Dalam satu fail css, kami menulis gaya komponen dalam teg gaya Anda boleh melihat bahawa secara amnya teg gaya akan mempunyai atribut berskop, supaya komponen yang berbeza boleh dilaksanakan dalam masa nyata Pemilih adalah sama, tetapi gaya tidak mengganggu satu sama lain.

Melihat contoh, kami mentakrifkan kelas hello-world-box dalam kedua-dua komponen dan menetapkan gaya berbeza dalam teg skop yang sepadan.

Seperti yang anda lihat, vue menambahkan 独有的属性（PostCSS转译实现） pada label dalam komponen yang berbeza untuk kami. Kemudian, melalui pemilih atribut, gaya label atribut berbeza tidak mengganggu antara satu sama lain.

Fungsi pemilih atribut css adalah untuk menetapkan gaya untuk elemen HTML dengan atribut khusus

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

Ini juga merupakan prinsip atribut berskop tag gaya untuk mencapai modularisasi gaya .
Apabila teg gaya mempunyai atribut berskop, gaya CSSnya hanya boleh digunakan pada komponen semasa, iaitu gaya hanya boleh digunakan pada elemen komponen semasa. Melalui atribut ini, gaya antara komponen boleh dielakkan daripada mencemarkan satu sama lain. Jika semua teg gaya dalam projek diskop, ia adalah bersamaan dengan merealisasikan modularisasi gaya.

2. Pelaksanaan penembusan gaya

Kini setelah kita memahami pelaksanaan pemodulatan gaya dalam vue, mari kita ke intinya, bagaimana untuk menyesuaikan gaya komponen dalam perpustakaan komponen elementUI?
Ini sebenarnya merupakan keperluan yang agak biasa, kerana sesetengah gambar rajah UI tidak dilukis menggunakan komponen daripada perpustakaan komponen elemen, jadi mesti ada penyelewengan dalam gaya.
Mari kita lihat el-table

Seperti yang anda lihat, gaya komponen elemen dilaksanakan melalui fail gaya luaran, jadi tiada vue pada tag yang sepadan menambahkan atribut.
Kemudian jika kami terus menambah gaya pada komponen menggunakan komponen elemen, fail gaya yang diimport secara luaran mempunyai keutamaan yang lebih tinggi.

1. Fail css luaran

Kami boleh menentukan sendiri fail css, dan kemudian menulis gaya yang sepadan untuk diubah suai.
Contohnya: styles.css

Diperkenalkan dalam main.js fail masukan:

Perhatikan pengenalan di sini Susunan fail css elemen dan fail css tersuai diperkenalkan, kerana gaya css mula berkuat kuasa.

Berkesan.
Tetapi sebenarnya terdapat masalah dengan ini: fail gaya mempengaruhi semua komponen, iaitu, apabila kita memanggil komponen ini di halaman lain, gaya juga diubah suai.
Satu penyelesaian ialah menambah nama kelas tersuai pada kelas yang sepadan dengan komponen.

2. :deep()

:deep(): Tukar kedudukan atribut peribadi semasa penghuraian 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(): Tentukan gaya kandungan slot gaya dalam komponen anak

Secara lalai, gaya skop tidak akan menjejaskan kandungan yang diberikan oleh <slot></slot> kerana ia dianggap dipegang oleh komponen induk dan diluluskan.

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

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

4 :global()

:global(): Pemilih global, mentakrifkan gaya global tanpa membuka gaya tanpa skop.

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

5. css dinamik (v-bind)

Teg <style></style> komponen fail tunggal vue3 menyokong penggunaan v-bind CSS 函数 untuk memautkan nilai CSS kepada 组件状态 dinamik, yang adalah Kita boleh memperkenalkan pembolehubah responsif dalam teg skrip ke dalam teg gaya:

<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>

Anda boleh melihat bahawa walaupun dalam teg gaya berskop, penembusan gaya adalah berkesan .

Nilai sebenar disusun ke dalam sifat tersuai CSS cincang, jadi CSS itu sendiri kekal statik. Atribut tersuai akan digunakan pada 组件的根元素 melalui gaya sebaris dan akan dikemas kini secara responsif apabila nilai sumber berubah.

Atas ialah kandungan terperinci Cara menggunakan penembusan gaya untuk mengubah suai gaya lalai elementUI dalam projek vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!