Angular Material 2 md-input 更改未聚焦文本和下划线颜色

【问题标题】：Angular Material 2 md-input changing un-focus text and under-line colorAngular Material 2 md-input 更改未聚焦文本和下划线颜色
【发布时间】：2016-10-01 23:40:54
【问题描述】：

md-input 未聚焦时是否可以更改文本颜色和线条颜色？例如，我在深色背景上使用 md-input，因此想要白色字体和下划线（见下文）。注意我想为我的其他表单保留默认颜色，因此理想的解决方案使我能够直接设置特定控件的样式或在输入上放置不同主题的方法。

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

我已经用下面的方法解决了类似的问题。

html

 <md-input 
    (focus)="searhFocus()" 
    (blur)="searchUnfocus()" 
    [ngClass]="{'searchbar-unfocus': !searchFocused, 'searchbar-focus': searchFocused}">
 </md-input>

组件.ts

  private searchFocused: boolean = false;
  searhFocus() {
    this.searchFocused = true;
  }
  searchUnfocus() {
    this.searchFocused = false;
  }

和css

.searchbar-focus{
  background: white;
  color: black;
}

.searchbar-unfocus{
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.38);
}

对于线路，可以使用:host >>> .md-input-underline{...}

【讨论】：