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

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>

以下不是在我的应用程序的 style.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

如果您检查为mat-select元素生成的 CSS ，您会发现.mat-disabled该类没有<mat-select>直接设置样式。相反，它的后代会根据该类的存在来改变样式；即，触发器值（应用了最多视觉样式的元素）具有特定规则

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

（旁注 - 我看到您opacity: 1在示例规则中使用。这不会使文本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是一个 hack，但是如果 css 规则不会将样式分配给所需的元素 - 您可以尝试检查您是否使用了正确的方式!important。