Impossible de modifier la couleur de l'espace réservé à la sélection de matériaux d'Angular.

Question

J'ai un problème avec le réglage de la couleur du placeholder en blanc sur le fond sombre, lorsque le réglage est en blanc, il a une course bizarre comme ceci :

https://stackblitz.com/edit/angular-twbzew-ealbnk

<mat-form-field>
    <mat-select [ngClass]="className" placeholder="{{someText}}">
        <mat-option *ngFor="let item of items" [value]="item.value">
            {{ item.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

.basic-container {
    background: black;

  padding: 5px;
}

.class1  .mat-select-placeholder {
  color:white !important;
}

Answer 1

Il semble qu'il y ait un deuxième élément placeholder qui se trouve devant.

Vous pouvez modifier la CSS pour que le deuxième élément soit également blanc, comme suit :

.class1  .mat-select-placeholder, 
.class1 + .mat-input-placeholder-wrapper .mat-input-placeholder {
    color:white !important;
}

Voici un fork de la Stackblitz pour démontrer

Answer 2

Try this

:host /deep/ .mat-form-field-label-wrapper .mat-form-field-label {
    color:white !important;
}