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预期的要难。

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来检查自己是否正确。

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

2 个答案: