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

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>

您还可以在课堂上设置颜色

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

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

所以使用

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

将应用您指定的颜色。 !重要的是覆盖默认值。

Answer 3

您可以将以下元素的 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

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

Answer 5

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

它对我有用

Answer 6

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

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

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

Answer 9

这帮助我更改了所选文本的样式：

::ng-deep .mat-selected .mat-option-text { color: white!important; }

Answer 10

如果您需要从变量设置 mat-option 的颜色，您应该：

1. 在mat-select中设置panelClass：

   panelClass="继承颜色">

2. 设置CSS规则：

   .inherit-color .mat-option { 颜色：继承！重要； }

3. 将 mat-option 包裹在 span 中并在其中设置样式：

   {{一些}}