在 Angular 15 中，如何减小表单字段的大小？

Answer 1

这是我的解决方案：

<mat-form-field style="font-size: 12px" appearance="outline">
  <mat-label>Name</mat-label>
  <input matInput placeholder="Name..." autocomplete="off"/>
</mat-form-field>

Answer 2

您可以通过在标签上应用 css 来更改表单字段标签的大小

mat-form-field { }

Answer 3

虽然 ng-deep 在技术上已被弃用，但我使用以下代码来更改新的 MDC Angular Material 表单字段的高度。

::ng-deep .mat-mdc-text-field-wrapper {
  max-height: 20px;
}

::ng-deep .mat-mdc-form-field {
  max-height: 30px;
}

::ng-deep .mat-mdc-form-field-infix {
  padding: 0 !important;
}

简短说明本示例中这些类的用途：

.mat-mdc-text-field-wrapper

用于表单字段内的文本大小。保持此不变将使文本呈现在调整大小的表单字段之外。

.mat-mdc-form-field

用于表单字段的实际大小。

.mat-mdc-form-field-infix

用于去除填充物。不更改此设置会将输入推离表单字段。不要忘记这里的重要属性。

您需要尝试所有这三个值，以获得一组适合您的情况的值。