'Angular Material MatFormField appearance="fill" theming questions

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 portion and the label, but I would like to target specifically the background-color. Could anyone please point me in the right direction.

cssangularangular-material


Solution 1:[1]

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

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

Solution 2:[2]

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

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

Solution 3:[3]

you can try :

::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: #fff;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 André Castro
Solution 2 G. Tranter
Solution 3 Suraj Rao

Related Questions