Mengapakah Gaya Panel Mat-Pilih Saya Tidak Berfungsi dalam Bahan Sudut?

Menggayakan tikar-pilih dalam Bahan Sudut

Apabila menyesuaikan penampilan tikar-pilih, anda mungkin menghadapi cabaran dalam menggayakan komponen panelnya. Walaupun mengikut pendekatan yang disyorkan untuk menggunakan sifat panelClass untuk menentukan gaya tersuai, gaya tersebut gagal digunakan, membuatkan anda bingung.

Mengapa Gaya Tidak Berfungsi

Bahan Sudut menggunakan mat-select -kandungan sebagai nama kelas untuk kandungan senarai pilih. Untuk menggayakan komponen ini, beberapa kaedah tersedia:

1. Menggunakan ::ng-deep

Gunakan penggabung turunan penusuk bayang-bayang ::ng-deep untuk memaksa gaya melalui komponen kanak-kanak.

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

2. Menggunakan ViewEncapsulation

Konfigurasikan enkapsulasi paparan komponen kepada Tiada, membenarkan gaya melarikan diri daripada pengasingan komponen.

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

3. Menetapkan Gaya Kelas dalam style.css

Gunakan fail style.css untuk menentukan gaya tersuai, menguatkuasakannya dengan !important untuk mengatasi mana-mana gaya sedia ada.

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

4. Menggunakan Gaya Sebaris

Gunakan gaya sebaris terus pada elemen pilihan tikar, mengatasi mana-mana gaya yang diwarisi.

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

Atas ialah kandungan terperinci Mengapakah Gaya Panel Mat-Pilih Saya Tidak Berfungsi dalam Bahan Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!