主页 / coding / 问题 / 79203057
Accepted
Haithem-B
Asked: 2024-11-19 18:38:51 +0800 CST

修改 mat-form-field 的颜色

  • 772

我找不到更改 Material 组件的 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 的这一部分或覆盖它。

css

1 个回答

  1. Best Answer

    不建议针对 Angular Material 组件的内部元素，因为它们可能随时发生变化。

    Angular 19+

    从 Angular 19 开始，使用 SCSS，你可以通过overrides mixin覆盖样式：

    @use '@angular/material' as mat;

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

    角度 <= 18

    在旧版本中，你可以为其 CSS 变量提供新值：

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

相关问题