Angular Material Select：更改禁用选项的颜色

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进行小的样式更改比预期的要困难。

- Ped

---

你必须使用“更具体的选择器”来应用你的CSS。此外，我建议您在Firefox开发工具中手动更改样式以查看哪些适用于您的情况。如果您需要帮助，请创建一个Stackblitz然后告诉我。 - Antoniossss

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。每次使用时，小狗都会死去。

- joh04667

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来检查是否在正确的路径上。

- Igor Kurkov