Angular Material v17中MatFormFieldAppearance缺失legacy值，如何实现旧样式输入框？

DevOps 小满

2026-7-2

解决Angular Material v17中模拟legacy输入框样式的问题

官方移除legacy样式的原因

Angular Material从v15开始逐步淘汰legacy和standard外观，核心原因是这两种样式不符合Material Design 3的设计规范，官方希望统一使用fill和outline这两款更贴合现代设计语言的样式，同时减少框架的维护成本，聚焦于符合最新设计标准的组件实现。

实现类似legacy样式的方法

方法一：自定义CSS模拟（推荐）

通过编写自定义CSS样式，基于现有fill或outline外观的组件，修改样式来模拟legacy的视觉效果：

/* 自定义legacy样式 */
.mat-form-field-legacy-custom {
  --mat-form-field-label-floating-transform: translateY(-1.25em) scale(0.75);
}

.mat-form-field-legacy-custom .mat-form-field-flex {
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  padding-top: 0.75em;
  padding-bottom: 0;
}

.mat-form-field-legacy-custom.mat-focused .mat-form-field-flex {
  border-bottom-color: var(--mdc-text-field-focus-active-indicator-color, #1976d2);
}

.mat-form-field-legacy-custom .mat-form-field-label-wrapper {
  padding-bottom: 0.5em;
}

.mat-form-field-legacy-custom .mat-form-field-label {
  top: 1.25em;
  transition: all 0.2s ease-in-out;
}

.mat-form-field-legacy-custom.mat-focused .mat-form-field-label,
.mat-form-field-legacy-custom.mat-form-field-should-float .mat-form-field-label {
  top: 0;
  font-size: 0.75em;
  transform: none;
}

在模板中使用时，给mat-form-field添加自定义类：

<mat-form-field appearance="fill" class="mat-form-field-legacy-custom">
  <mat-label>示例输入框</mat-label>
  <input matInput placeholder="请输入内容">
</mat-form-field>