Angular 15+：如何统一缩减MDC版Angular Material轮廓输入框高度

1. 自定义主题密度（突破默认限制） #

Angular Material的密度系统支持自定义等级，默认提供的-2不是下限，你可以在主题配置中设置更极端的密度值，全局统一调整组件的内边距和高度：

@use '@angular/material' as mat;

// 自定义密度配置，scale值可设为-1到-5，数值越小组件越紧凑
$custom-density: mat.define-density-config($default-scale: -3);

$light-theme: mat.define-light-theme((
  color: mat.define-palette(mat.$indigo-palette),
  typography: mat.define-typography-config(),
  density: $custom-density
));

这种方式会自动适配所有基于MDC的Material组件，不会破坏组件的内部布局逻辑。

2. 全局覆盖MDC原生CSS变量 #

MDC组件通过CSS变量控制间距，直接覆盖这些变量比硬写类选择器更安全，还能针对不同类型的输入组件单独调整：

// 在全局样式文件（如styles.scss）中添加
.mdc-text-field {
  // 调整输入框容器高度
  --mdc-text-field-container-height: 32px;
  // 输入内容上下内边距
  --mdc-text-field-input-padding-top: 4px;
  --mdc-text-field-input-padding-bottom: 4px;
}

// 适配填充型输入框的容器内边距
.mdc-text-field--filled {
  --mdc-text-field-filled-container-padding-top: 6px;
  --mdc-text-field-filled-container-padding-bottom: 6px;
}

// 单独排除文本域，避免高度被强制固定
.mdc-text-field--textarea {
  --mdc-text-field-container-height: auto;
  --mdc-text-field-input-padding-top: 8px;
  --mdc-text-field-input-padding-bottom: 8px;
}

// 日期选择器、自动完成等特殊组件的调整
.mdc-text-field--no-label {
  --mdc-text-field-container-height: 32px;
}

这种方式能精准控制各类输入组件的留白，同时保证组件状态（聚焦、错误、禁用）下的样式正常。

3. 精准覆写组件样式（避免影响全局） #

如果全局调整无法满足需求，可以通过::ng-deep（或全局样式）针对特定组件类型调整，避免干扰文本域等组件：

// 仅调整单行输入、下拉选择、日期选择器等组件
::ng-deep .mat-mdc-form-field:not(.mat-mdc-form-field-type-mat-textarea) .mdc-text-field {
  padding-top: 0;
  padding-bottom: 0;
}

::ng-deep .mat-mdc-input-element {
  padding-top: 4px;
  padding-bottom: 4px;
}

注意事项 #

• 调整后务必测试所有输入类组件的各类状态（聚焦、错误、禁用），确保标签、提示文本、图标等元素位置正确，避免错位或截断。
• 优先使用主题密度或MDC CSS变量，这是官方推荐的适配方式，能更好地兼容组件版本更新。
• 若设置极端密度值（如-4、-5），可能需要配合调整字体大小（通过主题排版配置），避免内容显示拥挤。

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