【问题标题】：Angular mat-select text color doesn't change角垫选择文本颜色不会改变
【发布时间】：2019-03-19 16:34:48
【问题描述】：

我在我的 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>

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

【问题讨论】：

标签： css angular material-design

【解决方案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>

你也可以在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;
}

【讨论】：

这适用于选项，但不适用于所选值。我希望红色出现在所选值上。
嗨，Anshuman。这在您打开选择时有效，但在您不打开选择时无效。我想在加载屏幕时看到绿色，我还没有点击选择。你知道怎么做吗？
嗨@AnshumanJaiswal 有没有办法在自定义类中应用 :host /deep/ 以免影响页面上的所有选择文本？

【解决方案2】：

您可以将以下元素的 css 覆盖为 -

选择框面板

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

选择框选项元素

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

选择框

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

如前所述，不要忘记添加 /deep/。

选择框文本颜色

如果要更改选择的文本颜色，请使用此选项。

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

演示副本在这里 - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy

【讨论】：

您好苏尼尔，感谢您的回复。第三个选项正是我正在寻找的，但不幸的是这不适用于文本颜色。如果我这样做，什么都不会改变：/deep/ .mat-select{ color: red; }
为文本颜色添加了css覆盖Select Box text color

【解决方案3】：

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

所以使用

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

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

【讨论】：

在样式的开头添加 :host 会使其限制在组件的范围内，而不是泄漏到全局样式。

【解决方案4】：

将此添加到您的 styles.css 文件中

.mat-select-red .mat-select-value{
   color: red !important;
}

在您的 component.html 文件中

<mat-select class="mat-select-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>

【讨论】：

这将改变整个应用程序的样式。
您将在特定的 component.css 文件上使用 ::ng-deep 定义分类。

【解决方案5】：

  <mat-select  [(ngModel)]="someValue">
      <mat-option style="color: red" >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>

【讨论】：

【解决方案6】：

::ng-deep .mat-select-arrow {
  display: none !important;
}

它对我有用

【讨论】：

不鼓励仅使用代码的答案。请简要说明您的答案如何解决问题，以及为什么它可能优于已提供的其他答案。
请不要添加“谢谢”作为答案。一旦你有足够的reputation，你就可以vote up questions and answers你觉得有帮助。 - From Review

【解决方案7】：

option appearance (legacy, standard, fill, outline)

<mat-form-field appearance="legacy">
   <mat-label>Choose an option</mat-label>
   <mat-select>
      <mat-option value="option1">Option 1</mat-option>...
   </mat-select>
</mat-form-field>

【讨论】：

您可能应该在答案中添加更多上下文。

【解决方案8】：

假设你有这个选择：

<mat-form-field appearance="fill">
    <mat-label>The label</mat-label>
    <mat-select>
        <mat-option value="This">This</mat-option>
        <mat-option value="That">That</mat-option>
    </mat-select>
</mat-form-field>

显示如下：

要仅设置颜色样式，请尝试以下操作：

::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: red;
}

::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
    color: red;
}

::ng-deep .mat-form-field.mat-focused.mat-primary .mat-select-arrow{
    color: red;
}

::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled){
    color: red;
}

哪个产生

这适用于 Angular 11.2.0、Angular Material 11.2.0。

【讨论】：