如何将Matinput高度降低到一定值？

Question

<mat-form-field class="example-form-field">
  <mat-label>Clearable input</mat-label>
  <input matInput type="text" [(ngModel)]="value">
  @if (value) {
    <button matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
      <mat-icon>close</mat-icon>
    </button>
  }
</mat-form-field>

该Matinput的高度为56px。我需要将这个高度降低到28px。请帮助我

这里是一个livedemo

。

您可以尝试设置这些CSS变量以自定义高度。 您应打开检查元素并检查CSS变量/修改它以更好地适合您的要求。 这些自定义有一个很大的问题，因为它们不受角材料的支持，并且当您升级到将来的版本时可能会破裂。

:host {
  --mat-form-field-container-height: 42px;
  --mat-form-field-filled-with-label-container-padding-top: 15px;
  --mat-form-field-filled-with-label-container-padding-bottom: 3px;
}

Answer 1