Angular Material 15：如何调整自动完成、日期选择器等聚焦组件的尺寸？

由于Angular Material 15切换到了MDC（Material Design Components）底层，原有的.mat-form-field-wrapper类名和样式结构发生了变化，之前的font-size调整方法不再生效。针对Autocomplete、Datepicker这类无法通过密度设置调整尺寸的组件，你可以通过以下方式自定义样式来缩小尺寸：

1. 全局覆盖Form Field基础样式 #

所有基于Form Field的组件（包括Autocomplete、Datepicker输入框部分）的尺寸都依赖于Form Field的容器样式，你可以在全局样式文件（如styles.scss）中添加以下代码：

/* 统一调整Form Field的字体大小，带动组件整体尺寸缩小 */
.mat-mdc-form-field {
  font-size: 0.875rem; /* 默认是1rem，按需调整为更小的数值 */

  /* 调整Form Field底部的内边距 */
  .mat-mdc-form-field-wrapper {
    padding-bottom: 0.5em; /* 默认是1.25em，缩小后避免多余留白 */
  }

  /* 调整输入框区域的上下内边距，压缩高度 */
  .mat-mdc-form-field-infix {
    padding-top: 0.375em;
    padding-bottom: 0.375em;
  }
}

2. 单独调整Autocomplete下拉面板 #

Autocomplete的下拉面板是独立容器，需要单独设置样式：

/* 缩小Autocomplete下拉面板的字体和宽度 */
.mat-mdc-autocomplete-panel {
  font-size: 0.875rem; /* 和Form Field字体保持一致 */
  min-width: 180px; /* 默认宽度较大，按需缩小 */
}

3. 单独调整Datepicker弹出面板 #

Datepicker的日历面板也需要单独调整：

/* 缩小Datepicker弹出面板的字体和日历尺寸 */
.mat-mdc-datepicker-popup {
  font-size: 0.875rem;

  .mat-mdc-calendar {
    width: 240px; /* 默认约300px，按需缩小 */
    height: 240px;
  }
}

4. 组件级样式调整（可选） #

如果只需要在特定组件内生效，可以在组件的SCSS文件中使用::ng-deep（注意：Angular官方推荐优先使用全局样式或自定义主题，::ng-deep未来可能被废弃）：

:host ::ng-deep .mat-mdc-form-field {
  font-size: 0.875rem;
  /* 其他样式同上 */
}

5. 自定义主题全局调整（进阶） #

如果希望全局统一所有组件的尺寸，推荐通过自定义Material主题的排版配置实现：

@use '@angular/material' as mat;

/* 定义自定义排版，缩小基础字体和Form Field的字体 */
$custom-typography: mat.define-typography-config(
  $font-size: 0.875rem,
  $form-field: mat.define-typography-level(0.875rem, 1.25, 400)
);

/* 将自定义排版应用到主题 */
$custom-theme: mat.define-light-theme((
  typography: $custom-typography
));

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

这些方法的核心是通过调整font-size（组件尺寸多基于em单位，会随字体大小缩放）和内边距，来适配MDC架构下的组件样式结构，从而实现Autocomplete、Datepicker等组件的尺寸缩小。

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