角度材質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佔位符顏色

回答

相關問題