如何缩减Angular Material中mat-form-field组件的默认大内边距？

嘿，刚好我之前也碰到过这个需求！Angular Material 16里的mat-form-field（尤其是outline外观的）默认内边距确实偏宽，要严格贴合设计稿的话，用自定义CSS或者主题配置就能搞定，给你两种实用的方法：

• 方法一：组件内局部调整样式（适合单个/少量组件）
  因为Angular有样式隔离机制，我们需要用深度选择器穿透组件样式，在你的组件CSS文件里添加以下代码：

  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
    padding-bottom: 0.5em; /* 外层底部内边距，默认是1.25em，按需调整 */
  }
  
  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 0.4em 0; /* 输入框容器的上下内边距，默认0.75em 0 */
  }
  
  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    top: -0.2em; /* 调整outline边框位置，避免内边距缩小后错位 */
  }
  
  ::ng-deep .mat-form-field-label-wrapper {
    top: -0.5em; /* 同步调整标签位置，保证排版正常 */
  }
  

  你可以根据设计稿的具体尺寸，微调这些em数值，记得实时预览效果，避免标签或图标错位。

• 方法二：全局主题配置（适合全项目统一调整）
  如果你想让所有mat-form-field都用这个紧凑样式，更推荐用Material的主题系统来配置，在项目的全局样式文件（比如styles.scss）里写：

  @use '@angular/material' as mat;
  
  $custom-form-field-theme: mat.define-form-field-theme(
    mat.define-light-theme(
      (
        form-field: (
          wrapper-padding-bottom: 0.5em,
          infix-padding: 0.4em 0,
          outline-padding: 0.2em,
        )
      )
    )
  );
  
  @include mat.form-field-theme($custom-form-field-theme);
  

  这种方式更符合Material的设计规范，也不会有样式隔离的问题，能一次性统一所有同类型组件的样式。

另外提个小提醒：Angular 16+里::ng-deep已经被标记为废弃，如果你不想用它，可以给组件设置encapsulation: ViewEncapsulation.None，但这样组件样式会全局生效，记得给样式加专属类名避免冲突哦～

备注：内容来源于stack exchange，提问作者Iter Ator