外观标准属性在 Angular 15 中不起作用

Question

Angular 15 中的

appearance="standard"

属性不再起作用。除了

standard

之外，所有外观都运行良好。

为什么这不再起作用？

结果：

需要：

<mat-form-field class="form-field" Appearance="Standard">
    <input matInput formControlName="email" matInput placeholder="email" name="email" type="text" required>
</mat-form-field>

Answer 1

您正在使用的属性的 API 从 v14 更改为 v15 。具体来说，删除了

legacy

和

standard

外观。

导入路径	变更摘要
...	...
@angular/material/form-field	样式更改、删除一些外观、API 更改
...	...

API 更改的原因在博客中进行了解释：

我们很高兴地宣布基于 Web 材料设计组件 (MDC) 的 Angular 材料组件重构现已完成！这一更改使 Angular 能够更接近 Material Design 规范，重用 Material Design 团队开发的原语代码，并使我们能够在最终确定样式标记后采用 Material 3。

从 v14 文档来看，Angular 14 中的有效值是：

type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';

从 v15 文档来看，Angular 15 中的有效值是：

type MatFormFieldAppearance = 'fill' | 'outline';

---

如果您想继续使用

appearance="standard"

，您可以尝试导入

MatLegacyFormFieldModule

而不是

MatFormFieldModule

。该博客提到，只要您不同时导入两者，它们目前是可以互换的。这是为了让您能够按照自己的节奏升级各个模块（包括您自己的模块和 Angular Material）。

每个新组件的旧实现现已弃用，但仍可通过“旧版”导入使用。例如，您可以通过导入旧按钮模块来导入旧的

mat-button

实现。

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

访问迁移指南了解更多信息。

Answer 2

在 Angular 15 中，不鼓励使用样式来定制材质库。但是，对于这么小的要求，您可以使用：

.mat-mdc-form-field-focus-overlay {
  background-color: white!important;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: white!important;
}