Style de mat-select dans Angular Material

Lors de la personnalisation de l'apparence de mat-select, vous pouvez rencontrer des difficultés lors du style de son composant de panneau. Bien que vous ayez suivi l'approche recommandée consistant à utiliser la propriété panelClass pour spécifier des styles personnalisés, les styles ne s'appliquent pas, vous laissant perplexe.

Pourquoi les styles ne fonctionnent pas

Le matériau angulaire utilise mat-select -content comme nom de classe pour le contenu de la liste de sélection. Pour styliser ce composant, plusieurs méthodes sont disponibles :

1. Utilisation de ::ng-deep

Utilisez le combinateur descendant ::ng-deep shadow-piercing pour forcer les styles à travers les composants enfants.

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

2. Utilisation de ViewEncapsulation

Configurez l'encapsulation de vue du composant sur Aucun, permettant aux styles d'échapper à l'isolement du composant.

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

3. Définition du style de classe dans style.css

Utilisez le fichier style.css pour définir des styles personnalisés, en les appliquant avec !important pour remplacer tous les styles existants.

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

4. Utilisation du style en ligne

Appliquez des styles en ligne directement aux éléments mat-option, en remplaçant tous les styles hérités.