角垫选择文本颜色不会改变

Question

我在我的 Angular 应用程序中使用 mat-select。我想更改文本颜色，但颜色没有改变。

<mat-select style="color: red" [(ngModel)]="someValue">
  <mat-option>class="empty-select"</mat-option>
  <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

我可以毫无问题地更改背景颜色，但文本颜色不会改变。

Answer 1

您需要将样式应用于mat-option而不是mat-select作为：

<mat-select [(ngModel)]="someValue">
  <mat-option class="empty-select"></mat-option>
  <mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

您也可以在 class 中设置颜色not-empty-select。

更新 1：

如果要更改所选选项的颜色，请添加以下 CSS：

.not-empty-select.mat-selected {
  color: green !important;
}

更新 2：

如果要更改选择框中的颜色，请将 CSS 修改为：

.not-empty-select.mat-selected {
  color: green !important;
}

:host /deep/ .mat-select-value-text {
  color: green !important;
}

Answer 2

You can overwrite the css for following elements as -

Select box panel

/deep/ .mat-select-panel {
    background-color: red;
}

Select box options element

/deep/ .mat-form-field-infix{
     background-color: red;
}

Select box

/deep/ .mat-select{
   background-color: red;
}

do not forget to add /deep/ as mentioned.

Select Box text color

Use this one if you want to change the text color of select.

/deep/ .mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
  color: red;
}

Demo copy is here - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy

Answer 3

如果您仔细检查 mat-select-value 是在 mat-select 标签中保存占位符字体的 css 的类；

所以使用

::ng-deep .mat-select-value{    
      color: white!important;  }

将应用您提供的颜色。!important 是覆盖默认值。