调整 Angular17 中 Mat-form-field 的高度

Question

我正在尝试调整 mat-form-field 的高度，外边框正在改变，但内部占位符没有改变。

我正在使用 Angular v17 和 Angular 材料 17.0.2

尝试调整 mat-form-field 的高度。

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

Answer 1

我不太明白你想要做什么，所以我会尽力给你找到它的方法。

首先，有关 Angular input 的文档没有提到更改高度的可能性，因此您必须覆盖内部 CSS，这通常暗示您做错了什么

打开开发工具并检查元素，以找到要覆盖哪个元素的样式

在这里，高度似乎由类

min-height

上的

mat-mdc-form-field-infix

属性决定，因此您需要覆盖它。

但由于它是

mat-input

的内部类，因此您必须使用

::ng-deep

。

当心

::ng-deep

会导致您放入其中的任何内容成为全局样式，因此该样式将“渗出”到组件之外，并可能影响应用程序的其他组件。在这里，它可能会覆盖所有组件的高度。为了避免这种情况，您应该always将其包含在

:host

元素中，如下所示：

:host { // Always protect ::ng-deep with a :host !
  ::ng-deep {
    .mat-mdc-form-field-infix {
      min-height: 80px;
    }
  }
}

瞧：