选择框面板

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

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

选择框面板

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

选择框选项元素

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

选择框

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

请不要忘记添加/ deep/。

选择框文字颜色

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

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

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

因此使用

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

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

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

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 7

我部分使用了 official reference 并发现以下解决方案有效：

:host ::ng-deep .mat-select-value .ng-tns-c105-1 {
  color: white;
}

注意：CSS 类可能因您而异。如果这不起作用，请检查您的元素在浏览器的开发者模式下使用的类，然后先尝试在那里应用样式。

您可以使用浏览器的检查元素（开发者工具）来检查应用到 Angular Material 元素上的 CSS 类。虽然 ::ng-deep 使范围成为全球性的，但 :host 确保将其限制为组件本身和后代。始终一起使用，避免将样式泄露给其他组件。

再补充一点：我最初不得不将这种样式应用到我的导航栏，不幸的是我的导航栏位于 AppComponent 中。因此，由于 :host 和 <router-outlet>，所有其他组件都继承了样式。因此，我将 Navbar 代码移动到单独的组件中并修复了它。

我已在组件 CSS 文件中应用此 CSS，未在 styles.css

编辑

我想添加我正在使用的版本：

Angular 11.x
引导程序 4.x

Answer 8

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

角度垫选择文本颜色不变

8 个答案:

选择框面板

选择框选项元素

选择框

选择框文字颜色