Angular Material 2 - 改变 md-select 占位符颜色

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是增加你的CSS块Styles.css中（或.scss或.sass）文件中./src 。

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

总结：您不能在your.component.css文件中的任何“Angular Material 生成的 HTML 元素”上应用 CSS，因为 Angular 在your.component.css将[_ngcontent-cXX]属性选择器添加到其中定义的所有规则中，以使您的 CSS 规则仅在您的范围内成分。

编辑：正如@RoddyoftheFrozenPeas（谢谢！）所指出的，我们可以使用/deep/跨组件应用样式。 但是，Angular 正在弃用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;

}

现场演示

Answer 3

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

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