Warum funktionieren meine Mat-Select-Bedienfeldstile nicht in eckigem Material?

Styling von mat-select in Angular Material

Beim Anpassen des Erscheinungsbilds von mat-select kann es zu Herausforderungen beim Styling der Panel-Komponente kommen. Obwohl Sie dem empfohlenen Ansatz folgen, die Eigenschaft „panelClass“ zum Angeben benutzerdefinierter Stile zu verwenden, werden die Stile nicht angewendet, was Sie verwirrt.

Warum die Stile nicht funktionieren

Angular Material verwendet Mat-Select -content als Klassenname für den Inhalt der Auswahlliste. Um diese Komponente zu gestalten, stehen mehrere Methoden zur Verfügung:

1. Verwenden von ::ng-deep

Verwenden Sie den ::ng-deep schattendurchdringenden Nachkommenkombinator, um Stile durch untergeordnete Komponenten zu erzwingen.

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

2. Verwenden von ViewEncapsulation

Konfigurieren Sie die Ansichtskapselung der Komponente auf „Keine“, damit Stile der Isolation der Komponente entkommen können.

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

3. Festlegen des Klassenstils in style.css

Verwenden Sie die Datei style.css, um benutzerdefinierte Stile zu definieren und erzwingen Sie diese mit !important, um alle vorhandenen Stile zu überschreiben.

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

4. Verwenden von Inline-Stilen

Wenden Sie Inline-Stile direkt auf die Mat-Option-Elemente an und überschreiben Sie alle geerbten Stile.

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

Das obige ist der detaillierte Inhalt vonWarum funktionieren meine Mat-Select-Bedienfeldstile nicht in eckigem Material?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!