Angular Material 15表单字段尺寸无法修改的解决方法求助

方法一：启用Legacy表单字段样式 #

Angular Material 15默认采用MDC架构的新表单组件，旧版本中随字体自动调整尺寸的逻辑属于Legacy模式，可通过全局样式开启：

@use '@angular/material' as mat;

@include mat.form-field-legacy();

如果仅需在特定组件启用，可给组件添加ViewEncapsulation.None后在组件样式中引入上述代码。

方法二：手动CSS控制尺寸 #

若不想依赖Legacy模式，可直接通过CSS调整表单字段的字体、内边距和高度：

/* 统一设置表单字段字体大小 */
.mat-mdc-form-field {
  font-size: 16px;
}

/* 调整输入框内边距以匹配字体大小 */
.mat-mdc-form-field .mat-mdc-input-element {
  padding-block: 10px;
}

/* 确保浮动标签同步字体大小 */
.mat-mdc-floating-label {
  font-size: inherit;
}

也可使用CSS变量统一管理，比如在:root中定义--form-field-font-size: 16px，再在相关元素中引用。

方法三：通过主题系统自定义 #

利用Angular Material的主题变量，同时控制字体和密度来调整尺寸：

@use '@angular/material' as mat;

$custom-theme: mat.define-theme(
  (
    typography: (
      form-field: mat.define-typography-level(
        $font-size: 15px,
        $line-height: 1.6,
      ),
    ),
    density: (
      // 密度范围-5到5，值越小组件越紧凑
      scale: -1,
    ),
  )
);

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

通过density.scale可快速调整表单字段的整体紧凑度，配合typography.form-field的字体设置，实现类似旧版本的适配效果。

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