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.

Continue reading...