angular - 改变 matInput 的颜色

Question

如何将 matInput 更改为自定义颜色。我想更改占位符和下划线颜色。

我已经阅读了大部分帖子，但找不到更改下划线的解决方案。

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

Stackblitz example

Image example

Answer 1

你可以使用纯CSS

 ::ng-deep .mat-focused .mat-form-field-label {
  /*change color of label*/
  color: green !important;
 }

 ::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: green !important;
} 

::ng-deep.mat-form-field-ripple {
 /*change color of underline when focused*/
 background-color: green !important;
}

或创建要应用的自定义主题。这是文章，如何创建自定义主题

https://alligator.io/angular/angular-material-custom-theme/