Styling von mat-select in Angular Material

Beim Anpassen des Erscheinungsbilds von mat-select kann es zu Herausforderungen beim Stylen 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 formatieren, stehen mehrere Methoden zur Verfügung:

1. Verwenden von ::ng-deep

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

::ng-deep .mat-select-content {
  width: 2000px;
  background-color: red;
  font-size: 10px;
}

2. Verwenden von ViewEncapsulation

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

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

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.

.mat-select-content {
  width: 2000px !important;
  background-color: red !important;
  font-size: 10px !important;
}

4. Verwenden von Inline-Stilen

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