CODEWITHSUNDEEP
cssangularsassangular-materialangular-material-theming
Keap
Keap

Reputation: 13

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.

Upvotes: 1

Views: 94

Answers (1)

JSON Derulo
JSON Derulo

Reputation: 17522

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;
}

Upvotes: 2

Related Questions