Bagaimana untuk Menggayakan Panel pilih tikar Bahan Sudut?

Menggayakan Panel pilihan tikar dalam Bahan Sudut

Isu

Apabila menyesuaikan panel komponen mat-select menggunakan panelClass , gaya CSS gagal digunakan walaupun tugasan kelas yang betul dalam templat HTML.

Penyelesaian

Untuk versi Angular 9 dan lebih baharu:

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

Untuk Angular 2.0.0- beta.12 dan versi terdahulu, terdapat beberapa pilihan untuk menggayakan panel:

Pilihan 1: Menggunakan ::ng-deep

Kaedah ini menggunakan ::ng -penggabung dalam untuk menembusi enkapsulasi paparan komponen:

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

Pilihan 2: Menggunakan ViewEncapsulation

Dengan menetapkan mod enkapsulasi kepada Tiada dalam metadata komponen, gaya CSS tidak lagi terkandung dalam paparan komponen:

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

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

Pilihan 3: Tetapkan gaya kelas dalam style.css

Gunakan gaya terus pada .mat-select- kelas kandungan dalam fail style.css luaran, menggunakan !important untuk memaksa aplikasi:

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

Pilihan 4: Menggunakan gaya sebaris

Tentukan gaya sebaris terus dalam Templat HTML:

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

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