无法更改Angular的Material Select占位符颜色。

Question

我在设置深色背景下的占位符颜色为白色时遇到了问题，当设置为白色时，会出现奇怪的描边，如下所示：。

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;
}

- Paweł Meller

Answer 1

似乎还有一个占位符元素位于前面。

您可以修改CSS，使第二个元素也变为白色，如下所示：

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

这里是一个关于Stackblitz的分支示例

- user184994

Answer 2

Try this

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

- Hieu.Nguyen