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

【问题标题】：Angular Material Select: change color of disabled option角度材质选择：更改禁用选项的颜色
【发布时间】：2018-09-27 20:46:54
【问题描述】：

使用 Angular/Material 6.2，在禁用的 mat-select 中找不到正确的 CSS 设置来覆盖所选 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 预期的更难。

【问题讨论】：

您必须使用“更具体的选择器”才能应用您的 CSS。此外 - 我会做什么 - 我会在 Firefox 开发控制台中手动更改样式，以查看实际适用于我的情况。克里特岛 stackblitz 我会为你做到这一点

标签： angular angular-material

【解决方案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。每次你这样做都会有一只小狗死去。

【讨论】：

【解决方案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 检查您是否正确。

【讨论】：