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

时间:2018-09-27 20:46:55

标签: angular angular-material

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

2 个答案:

答案 0 :(得分:2)

如果检查为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。每次您都会有一只小狗死。

答案 1 :(得分:0)

它不适用于常规课程,但可以与::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来检查自己是否正确。