Угловой материал MatFormField Внешний вид = «заполнить» тематические вопросы

Question

У меня есть вопрос, связанный с тематикой Angular Material, в частности директивой MatFormField.Вероятно, вокруг Material v6, я обнаружил, что директива matFormField имеет новые параметры, такие как внешний вид = «заливка» и внешний вид = «контур», я нашел полезный внешний вид = «заливка», но я хотел бы знать, как изменитьцвет фона используемой заливки.

Я пробовал несколько подходов, таких как

              <input class="w-100 bg-white form-control" #tileFilter 
          [formControl]="filterBy" 
          [matAutocomplete]="spiritilesAutocomplete"
          [matChipInputFor]="chipList"
          placeholder="Search by... Keyword, Author, Title, Story, etc."
          > 

Я также пытался выбрать

mat-form-field .mat-form-field-flex{
background-color: white; 

}

и многие другие вариантыо выборе и стилизации mat-form-field в частности, но я не могу найти ни селектор css, ни api-ссылку на цвет фона в документации.Я вижу, что Материал позволяет разделить подчеркнутые части и метку, но я хотел бы специально выбрать цвет фона.Может ли кто-нибудь, пожалуйста, указать мне в правильном направлении.Может быть, я просто не знаю.

Answer 1

В этом случае используйте ng-deep в файле css компонента.

::ng-deep {
  .mat-form-field .mat-form-field-flex{
    background-color: white; 
  }
}

Answer 2

Вам нужно добавить !important к значению цвета фона, чтобы оно заработало:

.mat-form-field-flex {
    background-color: white !important;
}