Angular 17中如何调整<mat-form-field>高度及占位符大小？

要同步缩小<mat-form-field>的整体高度和内部占位符尺寸，仅直接设置组件的height属性无法让内部元素适配，需要针对Angular Material的内部结构和CSS变量调整样式，具体实现如下：

步骤1：定义自定义样式类 #

在组件的CSS文件（或全局样式文件）中添加以下样式：

/* 全局样式中可去掉 :host ::ng-deep */
:host ::ng-deep .small-form-field {
  /* 控制表单字段容器高度 */
  --mat-form-field-container-height: 40px;
  /* 控制标签字体大小 */
  --mat-form-field-label-font-size: 14px;
  /* 控制输入框（含占位符）字体大小 */
  --mat-input-font-size: 14px;
}

:host ::ng-deep .small-form-field .mat-mdc-form-field-infix {
  /* 调整输入框容器的上下内边距 */
  padding-top: 0.5em;
  padding-bottom: 0.25em;
}

:host ::ng-deep .small-form-field .mat-mdc-input-element {
  /* 调整输入框元素的上下内边距 */
  padding-top: 0.375em;
  padding-bottom: 0.375em;
}

步骤2：应用样式类到mat-form-field #

修改HTML代码，为<mat-form-field>添加自定义样式类：

<mat-form-field appearance="outline" class="small-form-field">
  <input matInput placeholder="Enter name">
</mat-form-field>

说明 #

• 使用Angular Material提供的CSS变量（如--mat-form-field-container-height）能更精准地控制组件尺寸，避免直接硬写height导致的布局错位。
• 调整.mat-mdc-form-field-infix和.mat-mdc-input-element的内边距，可让输入框和占位符适配缩小后的容器高度。
• 如果使用全局样式文件定义.small-form-field，无需添加:host ::ng-deep前缀，样式会直接生效。

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