Angular 15 Material中输入框与选择框文本水平对齐问题

Angular 15切换到基于MDC的Material组件后，mat-select和matInput的内部布局样式发生了变化，导致两者输入文本的基线不再对齐。以下是几种可行的修复方案：

方案一：调整matInput的顶部内边距（最常用） #

通过修改matInput的输入区域顶部内边距，匹配mat-select的文本位置：

全局生效（项目所有同类型字段） #

在全局样式文件（如styles.css）中添加：

/* 针对outline外观的表单字段 */
.mat-mdc-form-field-appearance-outline .mat-mdc-form-field-input-control {
  padding-top: 0.125em;
}

仅当前组件生效 #

在组件的CSS文件中使用::ng-deep穿透样式隔离：

:host ::ng-deep .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-input-control {
  padding-top: 0.125em;
}

如果组件设置了viewEncapsulation: None，可以省略::ng-deep。

方案二：统一文本行高 #

通过调整两者的行高来实现对齐：

/* 调整mat-select的文本行高 */
.mat-mdc-select-value {
  line-height: 1.5;
}

/* 或者调整matInput的文本行高 */
.mat-mdc-input-element {
  line-height: 1.7;
}

方案三：覆盖MDC CSS变量 #

利用Material组件暴露的CSS变量直接修改内边距：

.mat-mdc-form-field-appearance-outline {
  --mdc-text-field-input-padding-top: 0.125em;
}

注意事项 #

• 可以根据项目实际的字体大小、组件外观（如fill/outline）微调padding-top或行高的数值（比如0.1em、0.2em），直到视觉上完全对齐。
• 如果使用了自定义Material主题，需确保主题样式不会覆盖上述自定义CSS。

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