Angular17中调整mat-form-field高度：占位符未随边框变化

当调整mat-form-field（outline外观）的高度时，仅修改外部边框高度会导致内部占位符（浮动标签）与输入框错位——这是因为Angular Material的form-field由多层嵌套元素构成，需同步调整内部元素样式才能保证布局对齐。

具体解决方案 #

1. 给mat-form-field添加自定义类，避免污染全局样式：

<mat-form-field appearance="outline" class="custom-form-field">
  <input matInput placeholder="Enter name">
</mat-form-field>

2. 在组件CSS中添加以下样式，同步适配高度与内部元素：

/* 设置form-field目标高度 */
.custom-form-field {
  height: 40px; /* 可根据需求修改为36px、48px等 */
}

/* 调整内部核心容器的尺寸，匹配整体高度 */
.custom-form-field .mat-mdc-form-field-infix {
  padding: 0.375em 0;
  min-height: 40px; /* 与form-field高度保持一致 */
}

/* 调整输入框行高与内边距，确保文本垂直居中 */
.custom-form-field input.mat-mdc-input-element {
  line-height: 1.2;
  padding: 0.5em 0;
}

/* 调整浮动标签的大小与位置，适配新高度 */
.custom-form-field .mat-mdc-floating-label {
  font-size: 0.875rem;
  transform: translateY(-1.1em) scale(0.75);
}

/* 修正未聚焦/无内容时的标签初始位置 */
.custom-form-field .mat-mdc-form-field:not(.mat-mdc-form-field-should-float) .mat-mdc-floating-label {
  transform: translateY(0.25em);
}

/* 调整outline边框内边距，避免与内容重叠 */
.custom-form-field .mat-mdc-form-field-outline {
  top: -0.25em;
}

关键说明 #

• .mat-mdc-form-field-infix是包裹输入框和标签的核心容器，它的min-height和padding必须与你设置的form-field高度匹配，否则内部元素必然错位。
• 浮动标签的transform属性需根据目标高度微调，确保聚焦时能正确浮动到边框上方且位置居中。
• 输入框的line-height和padding要对应调整，保证文本在新高度内垂直居中。

你可以根据实际需求修改高度数值，核心逻辑是保持内部元素的尺寸、定位与外部高度同步。

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