外观标准属性在 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

\n

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

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

\n

\n

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

\n

\n

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

\n

\n

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

\n

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

\n

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

\n

type MatFormFieldAppearance = \'fill\' | \'outline\';\n

\n\n

如果您想继续使用appearance="standard"，可以尝试导入 ，MatLegacyFormFieldModule而不是MatFormFieldModule。该博客提到，只要您不同时导入两者，它们目前是可以互换的。这是为了让您能够按照自己的节奏升级各个模块（您自己的模块和 Angular Material）。

\n

\n

每个新组件的旧实现现已弃用，但仍可通过 \xe2\x80\x9clegacy\xe2\x80\x9d 导入使用。例如，您可以mat-button通过导入旧按钮模块来导入旧的实现。

\n

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

\n

请访问迁移指南以获取更多信息。

\n

\n

Answer 2

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

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