角材料-垫选择更改所选值的颜色

Question

我在项目中使用Angular Material 8.2.3，并且尝试更改Mat-Select组件（即下拉菜单）的选定值颜色，如下所示。

在chrome inspector中，我可以看到字体颜色是由.mat-select-value类定义的

但是，当我尝试使用类选择器更改颜色时，什么也没发生。

是否可以更改所选值的颜色？我在页面上还有其他菜单下拉菜单，因此必须将其限制在此组件中。预先感谢。

下面的我的代码。

HTML

<mat-select class="custom-color"  [(ngModel)]="value">
    <mat-option>
        Yes
    </mat-option>
    <mat-option>
        No
    </mat-option>
</mat-select>

CSS

尝试1：

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

尝试2：

.custom-color > .mat-select-value{
    color: green !important;
}

Answer 1

您应该在选择中添加一个类（就像您已经做过的那样）。

在那之后，您需要选择要深入的选择器（如果div内的div内部有div ...）

如果您设置的类与mat-select-value类位于同一html组件中，那么您可以执行.custom-color.mat-select-value。

但是，棱角材质样式的工作方式使您无法轻松访问类（如果您不使用ng-deep）。

要设置组件样式，您必须执行以下操作：

在您的scss组件中创建一个mixin：

@import '~@angular/material/theming';

// Custom mat-select theme
@mixin mat-select-theme() {
  .custom-color.mat-select-value {
     color: green; // You may need to use important here, but it's just in a few cases
  }
}

然后，在主scss文件（即styles.scss）中声明@mixin

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import 'pathToFile.scss';
@include mat-select-theme();

尝试一下。

必要时提供的材料主题指南：

https://material.angular.io/guide/theming

Answer 2

您可以通过两种方式更改所选值的颜色

1.

.mat-select-value {
    color: #60D2A7 !important;
 }

2. .mat-select-value-text { 颜色：#60D2A7 ！重要； }