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

找不到任何正确的方式来覆盖默认值。角度材质2 - 更改md-select占位符颜色

简单：

<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; 
}

任何人都得到了一个解决方案？

来源

2017-05-29 TheUnreal

，你应该使用下面的样式类，

.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

来源

2017-06-02 21:05:47 Aravind

您的现场演示已损坏。 –

@RoddyoftheFrozenPeas所有的材料设计强盗都坏了。 :(提出了一个[github问题]（https://github.com/angular/material2/issues/6754） – Aravind

可能与推到2.0.0-beta10，其中移动cdk引用： –

的快捷方式覆盖CSS是增加你的CSS块Styles.css中（或.scss或.sass）文件在./src。

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

摘要：您不能在应用CSS任何“角材料生成的HTML元素”中your.component.css文件中，因为角度增加[_ngcontent-cXX]属性选择在其上定义的编译所有的规则，以保持你的CSS规则的唯一范围你的组件。我们可以使用/deep/来跨组件应用样式。但是，Angular是deprecatingdeep。所以，我们似乎没有一个长期支持的方式来做到这一点。

来源

2017-07-05 19:16:49 Krishnan

你可以很容易地在SCSS中使用'/ deep /'，例如'/ deep/md-select {...}' –

@RoddyoftheFrozenPeas true。忘了我已经发布了这个，但是，我最近还发现'/ deep /'正在被弃用，希望我没有误解他们的文档。https://angular.io/guide/component-styles#deprecated-deep-- and-ng-deep – Krishnan

Hm。有趣的是，他们没有提及用什么来代替已弃用的内容 - 他们建议使用':: ng-deep'，它也在弃用列表中。 –

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

回答

相关问题