角度垫选择文本颜色不变 [英] Angular mat-select text color doesn't change

问题描述

我在Angular应用程序中使用mat-select。我想更改文字颜色，但颜色不变。

I am using mat-select in my Angular application. I would like to change the text color, but the color doesn't change.

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

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

I can change the background color without problems, but the text color doesn't change.

推荐答案

您需要在 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>

也可以在类 not-empty-select 。

更新1：

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

If you want to change color of selected option add following CSS:

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

更新2：

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

If you want to change color in select box modify CSS as:

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

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

这篇关于角度垫选择文本颜色不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！