如何调整mat-input与mat-select的高度并保持内部元素居中对齐

以下是可落地的三种方案，均可以保证组件内部占位符、箭头等元素对齐正常：

方案1：使用官方密度配置（推荐） #

Angular Material 14+ 版本原生支持全局密度配置，是官方优先推荐的适配方式，不会破坏组件内部的对齐逻辑：
在全局样式文件styles.scss中引入主题时指定密度参数即可统一所有表单组件的高度：

@use '@angular/material' as mat;

// 定义主题时添加$density参数，取值范围为0到-3，数值越小组件高度越低
$custom-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
      warn: mat.define-palette(mat.$red-palette),
    ),
    typography: mat.define-typography-config(),
    density: -1, // 调整该值匹配你需要的高度，通常-1或-2就能对齐mat-select与mat-input
  )
);

@include mat.all-component-themes($custom-theme);

方案2：自定义样式修改mat-input高度 #

如果使用旧版本Material或者不需要修改全局主题，可以通过自定义类精准调整样式，避免全局污染：

1. 给所有需要统一高度的mat-form-field添加自定义类custom-form-field
2. 在全局样式中添加如下配置：

/* 可根据实际需求调整自定义高度变量 */
.custom-form-field {
  --field-target-height: 56px;
}

/* 统一表单字段内部容器的高度与对齐规则 */
/* 若使用Angular 14以前的非MDC版本Material，删除类名中的mdc即可，比如改为.mat-form-field-infix */
.custom-form-field .mat-mdc-form-field-infix {
  min-height: var(--field-target-height) !important;
  padding: 16px 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* 保证输入文本、占位符、下拉触发器居中对齐 */
.custom-form-field input,
.custom-form-field .mat-mdc-input-element,
.custom-form-field .mat-mdc-select-trigger {
  line-height: normal !important;
  margin: 0 !important;
}

/* 适配浮动状态下的占位符位置，数值可根据实际高度微调 */
.custom-form-field .mat-mdc-form-field-label-floating .mat-mdc-floating-label {
  top: 14px !important;
}

方案3：反向微调mat-select高度 #

如果不需要修改mat-input的默认高度，也可以单独微调mat-select的高度适配mat-input，改动量更小：

.mat-mdc-select-trigger {
  min-height: 48px; /* 调整为和你的mat-input一致的高度 */
  display: flex;
  align-items: center;
}

注意事项 #

• 非必要不使用!important，如果样式不生效可以提升选择器优先级，或者将样式写到全局styles.scss中
• 调整后需要测试占位符浮动、输入校验提示、禁用状态下的样式表现，避免冲突

参考效果：

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