Bagaimana untuk Menggayakan Panel pemilihan tikar dengan berkesan dalam Bahan Sudut?

Menggayakan Panel mat-select: Menyelesaikan Cabaran Penyesuaian

Masalah:
Dalam hierarki komponen mat-select, atribut panelClass ialah digunakan untuk menentukan gaya yang harus digunakan pada panel. Walau bagaimanapun, menggunakan gaya tersuai pada panel menggunakan kaedah ini nampaknya tidak berkesan, menyebabkan pembangun bingung.

Menangani Isu:

Untuk Angular 9 dan Ke Atas :

• CSS: .mat-select-panel {...} boleh digunakan untuk menggayakan panel.

Untuk Angular 4.4. 5 dan Bawah:

1. Menggunakan ::ng-deep (DIHENTIKAN):

• CSS: ::ng-deep .mat-select-content {...} akan menembusi pengkapsulan komponen untuk menguatkuasakan gaya pada kandungan senarai pilih.

2. Memanfaatkan ViewEncapsulation:

• TypeScript: Mendayakan ViewEncapsulation.Tiada dalam metadata komponen akan melumpuhkan enkapsulasi, membenarkan gaya CSS global digunakan secara langsung.

3. Mengatasi Gaya dalam style.css:

• style.css: Gunakan !important untuk mengatasi gaya lalai. Cth., .mat-pilih-kandungan {... !penting}.

4. Penggayaan Sebaris:

• HTML: Gunakan gaya sebaris dalam elemen. Cth., .

Contoh dalam Typescript (Kaedah 2):

<code class="typescript">import { ViewEncapsulation } from '@angular/core';

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

Contoh dalam style.css (Kaedah 3):

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

Dengan menggunakan kaedah ini, pembangun boleh menggayakan panel pilihan tikar dengan berkesan , menangani cabaran penyesuaian yang dihadapi dalam Bahan Sudut.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Panel pemilihan tikar dengan berkesan dalam Bahan Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!