Modify color of a mat-form-field

I can't find a way to change the color given by the Azure and Blue theme for the Material component. Especially for the mat-form-field (matInput).

HTML

<mat-form-field appearance="fill">
   <mat-label>{{ "pression_amont_minimum" | translate }} (P1)</mat-label>
   <input matInput type="number" formControlName="PressAmMin" />
</mat-form-field>

tried to change the style of the component by referencing to it inside the style.css and and component.css:

mat-form-field{
  background-color : white;
}

nothing happened

input{
  background-color : white;
}

a part of it changed to white

Render

mat-label{
  background-color : white;
}

::ng-deep

didn't worked for me

I found that changing the value of the

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: var(--mdc-filled-text-field-container-color, var(--mat-app-surface-variant)
);

could change the color of it but didn't find a way to reach this part of the css or override it.

It is not recommended to target the internal elements of Angular Material components, as they can change at any time.

Angular 19+

Starting from Angular 19, using SCSS, you can override the styles via the overrides mixin:

@use '@angular/material' as mat;

mat-form-field {
  @include mat.form-field-overrides((
    filled-container-color: white,
  ));
}

Angular <= 18

In older Angular versions you can provide new values for their CSS variables:

mat-form-field {
  --mdc-filled-text-field-container-color: white;
}