角度材质选择：更改禁用选项的颜色

Question

使用Angular / Material 6.2，无法找到正确的CSS设置来覆盖禁用的mat-select内所选mat-option的颜色：

<mat-select [disabled]="true" [value]="option2">
  <mat-option>None</mat-option>
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
  <mat-option value="option3">Option 3</mat-option>
</mat-select>

以下内容未在我的应用程序的styles.css中执行（默认设置太褪色；我需要在我的应用程序中更加强调它）：

.mat-select-disabled, .mat-select-content, .mat-disabled, mat-select.mat-disabled {
  opacity: 1.0 !important;
  font-weight: bold !important;
  color: black !important;
}

搜索变通办法会产生一些建议，这些建议使我无法在这个快速变化的API中工作。 我很可能对CSS一无所知，但是我发现较小的样式更改比Material预期的要难。

Answer 1

如果检查生成的CSS中的mat-select元素，则会发现.mat-disabled类没有直接设置<mat-select>样式。 相反，它的后代根据该类的存在来更改样式。 即，触发值（对其应用了最直观样式的元素）具有以下特定性规则：

.mat-select-disabled .mat-select-value {
    color: rgba(black, 0.38);
}

（旁注–我看到您在示例规则中使用的是opacity: 1 。这不会使带有color: rgba(x)文本color: rgba(x)看起来有所不同。）

就CSS的性质而言，您需要获得比此规则更具体的信息才能覆盖它。

因为Angular很棒，所以它基于称为视图封装的概念进行操作-组件的样式对于该组件而言是本地的。 这是通过属性标记实现的，其中所有组件样式通常都会添加到选择器中。

这意味着，如果您仅在组件中复制相同的规则，它将比以前的选择器更具体并且将适用。

如果您尝试在全局范围内应用此方法，则需要添加另一个类选择器，然后将该类添加到元素中。 或者，那些使用SASS和Material主题化的用户可以将其包装在一个主题中，并通过一个简单的类来应用它。 指令也可以。

另外，请不要使用!important 。 每次做时，一只小狗都会死亡。

Answer 2

它不适用于常规类，但可以与::ng-deep ：

.mat-select {
    ::ng-deep .mat-select-content {
      width: 100%;
    }
    ::ng-deep .mat-select-value {
      color: green /*!important*/;
    }
}
.mat-select-disabled {
    ::ng-deep .mat-select-value {
      color: red /*!important*/;
    }
}

!important是一个技巧，但是如果css规则不会将样式分配给所需的元素-您可以尝试使用!important检查是否正确。