Изменить цвет matInput

Question

Как мне изменить matInput на собственный цвет.Я хочу изменить заполнитель и цвет подчеркивания.

Я прочитал большинство постов и не смог найти решение для изменения подчеркивания.

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

Пример Stackblitz

Пример изображения

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/

Answer 2

Существует два класса: .mat-form-field-label для текстовой метки и .mat-form-field-underline для подчеркивания.Переопределите эти два класса, задав им нужные стили.

Вот рабочая ссылка

https://stackblitz.com/edit/angular-nhvrog-zexty5?file=styles.css

Спасибо.