Angular Material 选择: change color of disabled option

Question

使用 Angular/Material 6.2，无法找到正确的 CSS 设置来覆盖禁用的垫选择中所选垫选项的颜色:

<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) 的文本看起来有任何不同。)

就 CSS 的本质而言，您需要比此规则更具体的规则才能覆盖它。

因为 Angular 非常棒，所以它运行在一个称为 View 封装的概念上——组件的样式是该组件的本地样式。这是通过属性标签实现的，其中所有组件样式通常都会将其添加到选择器中。

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

如果您尝试全局应用此功能，则需要添加另一个类选择器并将该类添加到元素中。或者，那些使用 SASS 和 Material 主题的人可以将其包装在一个主题中，并通过一个简单的类应用它。指令也可以工作。

另外，请不要使用!important 。每次你这么做都会有一只小狗死去。