angular - Angular Material 2 md-input フォーカスされていないテキストと下線の色を変更する

Question

フォーカスされていないときに md-input のテキストの色と線の色を変更することはできますか? たとえば、暗い背景で md-input を使用しているため、白いフォントと下線が必要です (以下を参照)。他のフォームのデフォルトの色を保持したいので、特定のコントロールを直接スタイル設定できるソリューション、または入力に別のテーマを配置する方法が理想的です。

Answer 1

以下の方法で同様の問題を解決しました。

html

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

component.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{...}