Angular Material MatFormField appearance="fill" theming questions

3
votes

I have a question dealing with Angular Material theming, specifically the MatFormField directive. Probably around Material v6, I found that the matFormField directive has new options such as appearance="fill" and appearance="outline", I have found the appearance="fill" useful, but I'd like to know how to change the background color, of the fill being used.

I have tried a few approaches such as, 

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

I've also tried selecting 

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

}

and many other variations of selecting and styling mat-form-field in particular, but I cannot find the css selector nor, an api reference to the background color in the documentation. I see that Material allows theming of the underlined portioned and the label, but I would like to target specifically the background-color. Could anyone please point me in the right direction. Maybe I'm just ignorant.

2
cssangularangular-material

2 Answers

2
votes

In this case, use ng-deep in your component css file.

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

You need to add !important to the background-color value in order to make it work:

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