如何缩小Angular Material 16 Form-Field组件高度？

Angular Material 16更新了表单字段的布局逻辑，旧版本靠调字体大小、边距改高度的方法不管用了，得针对新的DOM结构和CSS变量来改样式：

1. 适配filled外观的调整 #

如果你的表单用的是appearance="filled"，加下面这些CSS就行：

/* 自定义表单字段整体高度和字体 */
mat-form-field.appearance-filled {
  --mat-form-field-container-height: 40px; /* 自己改想要的高度 */
  font-size: 14px; /* 自定义字体大小 */
}

/* 调整输入框的内边距 */
mat-form-field.appearance-filled .mat-mdc-form-field-input-control {
  padding-top: 10px;
  padding-bottom: 8px;
}

/* 调整标签的大小和初始位置 */
mat-form-field.appearance-filled .mat-mdc-floating-label {
  font-size: 14px;
  top: calc(var(--mat-form-field-container-height) - 24px);
}

/* 聚焦或输入有值时，调整标签的位置和大小 */
mat-form-field.appearance-filled.mat-mdc-form-field-should-float .mat-mdc-floating-label {
  top: 8px;
  font-size: 12px;
}

样式可以放到组件的styles.css、全局样式文件里，或者在组件内用::ng-deep让样式生效。

2. 适配outline外观的调整 #

如果用的是appearance="outline"，换这些样式：

mat-form-field.appearance-outline {
  --mat-form-field-container-height: 36px;
  font-size: 14px;
}

/* 调整输入框内边距 */
mat-form-field.appearance-outline .mat-mdc-form-field-input-control {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* 调整标签大小 */
mat-form-field.appearance-outline .mat-mdc-floating-label {
  font-size: 14px;
}

/* 调整边框容器的高度 */
mat-form-field.appearance-outline .mat-mdc-form-field-outline {
  height: var(--mat-form-field-container-height);
}

3. 不让错误消息撑高字段（可选） #

官方文档相关内容翻译：

表单字段可以通过<mat-error>元素显示错误消息。默认情况下，错误消息会在表单控件无效且已被触碰、或者表单已提交时显示。可以通过errorStateMatcher输入属性自定义错误消息的显示时机。当错误消息显示时，表单字段会增加额外的高度来容纳错误文本。如果希望错误消息不占用额外空间，可以设置hideRequiredMarker并使用自定义样式，或者考虑将错误消息显示在表单字段外部。

如果不想让错误消息撑高字段，加下面的样式：

/* 默认隐藏错误消息容器 */
mat-form-field .mat-mdc-form-field-error-wrapper {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}

/* 字段出错时再显示错误消息 */
mat-form-field.mat-mdc-form-field-has-error .mat-mdc-form-field-error-wrapper {
  height: auto;
  opacity: 1;
}

注意点 #

• 优先用CSS变量（开头是--mat-form-field-的）调整，别直接改Material的内置类，这样后续版本更新也不容易崩。
• 记得测试空值、有值、聚焦、出错这些不同状态下的显示效果，确保样式都适配。

内容的提问来源于stack exchange，提问作者AbdulRahman Riyaz