css - Modify color of a mat-form-field - Stack Overflow

admin管理员组

文章数量:1431434

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.

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.

• css
• angular
• sass
• angular-material
• angular-material-theming

Share Improve this question Follow edited Nov 19, 2024 at 10:48 Naren Murali 61.1k55 gold badges4444 silver badges8181 bronze badges asked Nov 19, 2024 at 10:38 KeapKeap 1311 silver badge22 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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

本文标签： cssModify color of a matformfieldStack Overflow