how to customize background color for mat-form-field?

Question

All mdc mat-form-field examples have gray/whitesmoke background. How can I change it?

https://material.angular.io/components/form-field/overview

Answer 1

you can try

.mat-form-field {
 background-color: #b0e0e6; /* Light blue color */
}

or

.mat-mdc-form-field {
 background-color: #b0e0e6; /* Light blue color */
}

in your styles.css

Answer 2

I ended up doing the following. Wondering if there is a better way:

.mat-mdc-text-field-wrapper {
    background-color: white !important;
    border-bottom: none !important;
}

.mat-mdc-form-field-focus-overlay {
  background-color: white !important;
}

Answer 3

Angular 15 and greater below property in root styles.css allows to control the background of text fields

/* Angular 15 adds grey background on mat form components */
/* below removes that background color */
/* Manipulate initial background color*/
  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
     background-color: transparent !important;
 }
/*Manipulate background color on hover and focus*/
 .mat-mdc-form-field-focus-overlay {
       background-color: transparent !important;
}