角度材料选择:更改禁用选项的颜色

Question

使用 Angular/Material 6.2，找不到正确的 CSS 设置来覆盖禁用的 mat-select 中所选垫选项的颜色：

<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>

以下不是在我的应用程序的样式中执行此操作.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是一个黑客，但如果 css 规则不会将样式分配给所需的元素 - 您可以尝试检查您是否以正确的方式使用!important.