Bagaimana untuk Menggayakan Panel `mat-select` dengan Berkesan dalam Bahan Sudut?

Menggayakan Panel pilihan tikar dalam Bahan Sudut

Dalam Bahan Sudut, penggayaan komponen panel pilih tikar boleh dicapai melalui pelbagai pendekatan. Walaupun menetapkan atribut panelClass, anda mungkin menghadapi masalah penggayaan. Artikel ini menangani cabaran ini dan menyediakan penyelesaian yang berkesan.

Menggunakan ::ng-deep (Shadow-Piercing Descendant Combinator)

Kaedah ini membolehkan anda memaksa gaya turun melalui komponen kanak-kanak menggunakan ::ng-deep combinator. Walau bagaimanapun, ambil perhatian bahawa sokongannya sedang dialih keluar daripada penyemak imbas dan disyorkan untuk menggunakan ::ng-deep untuk keserasian yang lebih luas.

::ng-deep .mat-select-content {
    width: 2000px;
    background-color: red;
    font-size: 10px;
}

Menggunakan ViewEncapsulation None

Dengan menetapkan mod enkapsulasi paparan kepada Tiada, anda melumpuhkan enkapsulasi Angular dan membenarkan gaya mempengaruhi keseluruhan aplikasi.

<code class="typescript">@Component({
    ...,
    encapsulation: ViewEncapsulation.None
})</code>

<code class="css">.mat-select-content {
    width: 2000px;
    background-color: red;
    font-size: 10px;
}</code>

Menetapkan Gaya Kelas dalam style.css

Kuatkuasakan gaya dengan !penting untuk mengatasi gaya dalaman Angular.

<code class="css">.mat-select-content {
    width: 2000px !important;
    background-color: red !important;
    font-size: 10px !important;
}</code>

Menggunakan Gaya Sebaris

Gunakan gaya terus pada elemen pilihan tikar.

<mat-option style="width: 2000px; background-color: red; font-size: 10px;"></mat-option>

Nota Tambahan untuk Angular 9

Untuk versi Angular 9 dan ke atas, nama kelas CSS untuk kandungan senarai pilih telah ditukar kepada mat-select-panel. Oleh itu, gunakan sintaks berikut:

<code class="css">.mat-select-panel {
    background: red;
    ....
}</code>

Pertimbangkan mencuba kaedah ini untuk menggayakan mat-select dengan berkesan dan menyelesaikan isu penggayaan yang mungkin anda hadapi.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Panel `mat-select` dengan Berkesan dalam Bahan Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!