如何去除 mat-form-field 底部的空白间隔

您可以将 height:4em 添加到 mat-form-field 中，如下所示：

    <mat-form-field
        class="height-4em"
        appearance="outline"
        >
        <mat-label>Favorite food</mat-label>
        <input matInput placeholder="Ex. Pizza" value="Sushi">
    </mat-form-field>

在Angular Material 15中，你可以使用subscriptSizing="dynamic"。

.mat-form-field-infix{
    display: block;
    position: relative;
    flex: auto;
    padding: 0;
    border-top: 0px solid transparent !important;
}

你可以在CSS中添加important。

不要使用 ::ng-deep。
这很简单。只需将以下内容添加到您的 CSS 文件中即可。

mat-form-field{
    margin-bottom: -1.25em
}

我的解决方案： 在mat-form-field中添加自定义类，并针对.mat-mdc-form-field-bottom-align类将其display属性的值设置为none，在我的情况下解决了问题。

::ng-deep .my-form-field .mat-mdc-form-field-bottom-align {
    display: none !important;
}
<mat-menu #menu="matMenu">
  <ng-container *ngIf="currentPage === 1">
    <mat-form-field class="my-form-field" style="padding:10px;">
      <input matInput>
    </mat-form-field>
  </ng-container>
</mat-menu>

我在使用mat-fab按钮与mat-spinner一起时遇到了类似的问题。每当spinner被“激活”时，周围的元素都会向下移动。问题出在.mat-fab .mat-button-wrapper上，它来自于渲染后嵌入的包装span元素中的mat-spinner。

解决方法：

::ng-deep .mat-fab .mat-button-wrapper {
  padding: 0;
  vertical-align: middle;
}

问题已解决。不需要vertical-align，但在mat-fab按钮中很好地对齐了旋转器。

通过使用 Material Theme 更改字体大小，您可以得到更小的输入。

$typography: mat-typography-config(
  $input: mat-typography-level(14px, 1.125, 400),
);

@include mat-core($typography);

使用Angular 16

   .mat-mdc-form-field-bottom-align::before {
      display: none !important;
    }

但是将其设置在style.css文件中，放在文件夹的根目录下，而不是组件的css中。

你只需要使用下标包装器的类名即可：

::ng-deep .mat-mdc-form-field-subscript-wrapper {
    height: 0;
}

那样你就可以通过选择适当的CSS查询轻松地从你的mat-form-fields中移除底部空间。
在组件的SCSS文件中放置上述CSS规则将导致组件内所有使用的mat-form-fields的底部空间被移除。