Question

找不到任何正确的方法来覆盖默认值。

简单地说：

<md-select class="selector"
      color="primary"
      placeholder="Date Format" --> change this color
      [(ngModel)]="dateType" name="dateType">
        <md-option value="1">Option 1</md-option>
        <md-option value="2">Option 2</md-option>
</md-select>

尝试覆盖任何占位符类都没有这样做：

md-select, .mat-select-placeholder, .mat-select-trigger {
  color:white !important;
}

任何人都有解决方案吗？

Answer 1

覆盖CSS的快捷方法是在./src中的styles.css（或.scss或.sass）文件中添加CSS块。

md-select, .mat-select-placeholder, .mat-select-trigger {
  color:white !important;
}

摘要：您无法在your.component.css文件中的任何“Angular Material生成的HTML元素”上应用CSS，因为Angular会在编译时为其中定义的所有规则添加[_ngcontent-cXX]个属性选择器将CSS规则仅保留在组件的范围内。

编辑正如@RoddyoftheFrozenPeas所指出的那样（谢谢！），我们可以使用/deep/在各个组件之间应用样式。但是，Angular是deprecating deep。因此，我们似乎没有长期支持的方式来做到这一点。

Answer 2

您应该使用以下样式类

.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow,
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger {
  color: red;
}

.mat-select-arrow,
.mat-select-disabled .mat-select-value,
.mat-select-trigger {
  color:orange;

}

LIVE DEMO

Answer 3

.mat-form-field-label,.mat-select-arrow
{
    color: white !important;
}

占位符文本颜色更改和箭头

角度材质2 - 更改md选择占位符颜色

3 个答案: