Wie gestaltet man das Mat-Select-Panel für eckiges Material?

Stilisierung des Mat-Select-Panels in eckigem Material

Problem

Beim Anpassen des Panels der Mat-Select-Komponente mit panelClass , CSS-Stile werden trotz korrekter Klassenzuweisung in der HTML-Vorlage nicht angewendet.

Lösung

Für Angular 9 und spätere Versionen:

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

Für Angular 2.0.0- beta.12 und frühere Versionen gibt es mehrere Optionen zum Formatieren des Panels:

Option 1: Verwenden von ::ng-deep

Diese Methode verwendet ::ng -tiefer Kombinator, um in die Ansichtskapselung der Komponente einzudringen:

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

Option 2: ViewEncapsulation verwenden

Durch Festlegen des Kapselungsmodus auf „Keine“ in den Komponentenmetadaten und CSS-Stilen sind nicht mehr in der Ansicht der Komponente gekapselt:

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

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

Option 3: Klassenstil in style.css festlegen

Stile direkt auf die .mat-select- Inhaltsklasse in der externen style.css-Datei, mit !important die Anwendung erzwingen:

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

Option 4: Inline-Stil verwenden

Definieren Sie Inline-Stile direkt innerhalb der HTML-Vorlage:

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

Das obige ist der detaillierte Inhalt vonWie gestaltet man das Mat-Select-Panel für eckiges Material?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!