修改 mat-form-field 的颜色

Question

我找不到更改材质组件的 Azure 和 Blue 主题给出的颜色的方法。 特别是对于 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>

尝试通过在 style.css 和 component.css 中引用它来更改组件的样式：

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

什么都没发生

input{
background-color : white;
}

一部分变成了白色

渲染

mat-label{
background-color : white;
}

::ng-deep

对我没用

我发现改变

的值

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

可以改变它的颜色，但没有找到方法来到达CSS的这一部分或覆盖它。

Answer 1

不建议针对 Angular Material 组件的内部元素，因为它们随时可能发生变化。但是，您可以为其 CSS 变量提供新值：

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

更新到 v19（当前处于 RC 版本）后，如果您使用 SCSS，则可以使用 overrides mixin 代替：

@use '@angular/material' as mat;

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