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

Question

我使用 Angular 7 和 Angular Material，想要去掉底部空白，如您所见。我尝试了很多方法，但都没有成功。

- user9714967

Answer 1

您可以将此内容添加到您的CSS中。

::ng-deep .mat-form-field-wrapper{
   margin-bottom: -1.25em;
}

注意: 当您去除空格时，无法正确放置<mat-hint>hint</mat-hint>或<mat-error>error</mat-error>。错误和提示将进入表单字段。

在不使用::ng-deep(对于Angular 8)的情况下

关闭您更改填充内容的组件的封装。

您可以通过以下方式完成此操作：

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

将您想要样式化的组件包裹在自定义类中。这样它就不会影响到其他mat-form-field组件。 现在，让我们将其用my-form-field类包装起来。

<mat-form-field class="my-form-field">
  <input matInput placeholder="Input">
</mat-form-field>

.my-form-field .mat-form-field-wrapper {
      margin-bottom: -1.25em;
}

您可以将这些CSS添加到全局样式表中，而无需关闭视图封装。但更优雅的方法是上面提到的那种方法。

- Akhi Akl

---

使用!important，否则它不起作用。 => margin-bottom：-1.25em !important; - Isuru Dilshan

你不需要加上 !important 才能让它起作用。因为 Angular Material 中的 .mat-form-field-wrapper 样式中没有 margin-bottom，即使它们有任何 margin-bottom 样式（默认情况下不是 !important），因为我们使用自定义类包装 mat-form-field，例如在这里是 'my-form-field'。 - Akhi Akl

我并不是说 .mat-form-field-wrapper 没有 CSS 样式，而是它没有任何 margin-bottom 样式的 CSS。 而且我真的很困惑为什么它在 Angular 10 中不起作用。我已经使用了最新的 Angular Material。请检查这个 stackblitz，它使用了最新的 Angular Material。 - Akhi Akl

现在我明白了。我误解了填充和下边距。你是正确的。 - Isuru Dilshan

太好了！恭喜！谢谢！它有效。此外，不会影响应用程序的其余部分。它仅适用于特定类别*.my-form-field*中包含的组件。这应该在某篇文章中作为模式进行解释。 - Montells

Answer 2

对于任何在2023年阅读此文的人：Angular 15现在为表单字段添加了一个新属性：subscriptSizing。

如果您将subscriptSizing="dynamic"添加到mat-form-field中，它将删除空格，直到需要显示错误或提示时才会展开。这会导致布局移位，但根据您的用例，这可能比手动添加边距更好，如之前所建议（在版本14之前是必需的）。

有关参考，请参见https://material.angular.io/components/form-field/api#SubscriptSizing

您还可以通过MAT_FORM_FIELD_DEFAULT_OPTIONS注入令牌全局指定此选项的默认值；请参见https://material.angular.io/components/form-field/api#MatFormFieldDefaultOptions

// in main.ts (Angular 15+)
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: {
        subscriptSizing: 'dynamic'
      }
    }
  ],
});

- Christoph142

---

@mbauer: 我现在无法访问我的工作设备，因此没有测试过它，但我非常有信心，你可以从 mat-form-field 派生一个自定义组件，设置这个属性，并用你继承的组件替换代码中的所有 mat-form-field 使用。 - Christoph142

@mbauer 是的，您可以在您的 app.module 中的 MAT_FORM_FIELD_DEFAULT_OPTIONS 中添加它。 - Matt Harrison

这是最好的答案。它是最新的，而且实际有效。其他的CSS技巧对我都没有用。我正在使用Angular 15。 - João Victor

在app.module.ts中进行更改比在main.ts中更加便携和安全。除非涉及到环境变更、资源、全局样式、TypeScript和Angular设置等，否则您的应用程序相关更改应全部发生在src/app/文件夹内。在升级过程中，Angular可能会更改main.ts的结构，导致您丢失提供者的设置。 - undefined

它对 mat-checkbox 没有起作用。 - undefined

Answer 3

尝试以下操作：

<mat-form-field style="margin-bottom: -1.25em">

（您可以在此处关注有关此额外底部空间的讨论：https://github.com/angular/components/issues/7975）

- Emeric

Answer 4

在 Angular 9 中，我能够通过将以下内容添加到 component.scss 文件中来消除间隙（其他答案在我的情况下均无效）：

:host ::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

另外，我正在使用appearance="outline"，对于其他外观，可能需要更改其他CSS类和属性，因为它可能具有其他元素。

- Rafael Cerávolo

Answer 5

我的解决方案是使用一个额外的类。

HTML:

<mat-form-field class="no-padding">
    <input type="number" matInput placeholder="Speed" [ngModel]="speed"
           (ngModelChange)="onSpeedChange('speed', $event)"/>
  </mat-form-field>

SCSS：

.no-padding {
  .mat-form-field-wrapper {
    padding-bottom: 0 !important;
  }
}

很不幸，!important关键字是必需的，否则它将只会使用默认值。

- TomDK

---

我不得不将这个放到 styles.scss 中而不是 my.component.scss 中，才能让它在 Angular 11 中正常工作。 - brt

Answer 6

或者简单地说：

HTML

<mat-form-field class="no-bottom">
...
</mat-form-field>

css

.no-bottom {
  margin-bottom: -1.25em !important;
}

- Jonathan

---

不错！我试过 padding-bottom: 0 但没起作用，谢谢你！ - Gustavo Barros

Answer 7

我用 Angular 10 进行测试，这个可以正常工作：

:host ::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

此外，如果您需要仅在特定字段上应用样式，请定义一个类：

    <mat-form-field appearance="outline" class="no-wrapper">
      <input matInput>
    </mat-form-field>

在你的CSS中添加类名：

    :host ::ng-deep .no-wrapper .mat-form-field-wrapper{
      margin: 0 !important;
      padding: 0;
     }

- Jalal Tabatabaei

Answer 8

以下模板怎么样：

<mat-form-field appearance="standard" class="compact-input">
  <mat-label>Test</mat-label>
  <input matInput>
</mat-form-field>

以下是相关的SCSS代码：

.compact-input {
  .mat-form-field-flex {
    padding-top: 0;
  }

  .mat-form-field-wrapper {
    padding-bottom: 0;
  }

  .mat-form-field-underline {
    bottom: 0;
  }
}

尽管仅测试了 standard 外观。

别忘了在组件中添加 encapsulation: ViewEncapsulation.None。 如果你把 SCSS 放在全局样式中，可能需要添加一些 !important。

- 1FpGLLjZSZMx6k

Answer 9

我可以通过在style.scss中使用以下css来移除mat-form-filed的底部空间：

Original Answer翻译成"最初的回答"

.mat-form-field-wrapper{
    padding-bottom: 10px;
}

- Sushilkumar Patil

Answer 10

.mat-mdc-form-field-subscript-wrapper {
    display: none;
}

- J. Jerez

---

这是一个不好的解决方案。您可以通过在表单字段上设置 subscriptSizing=dynamic 选项来实现相同的效果。请参阅 https://dev59.com/uFQJ5IYBdhLWcg3wg2NQ#75107066 。 - JSON Derulo

@JSONDerulo，可能会有一个自定义控件，在内部使用mat-form-field（或其他类似的东西）。在这种情况下，您无法设置您无法直接访问的元素的属性。因此，我不会称这个解决方案为“差劲”。有时这是唯一的解决方案。 - Alexander

@JSONDerulo，可能会有一个自定义控件，在底层使用mat-form-field（或其他类似的东西）。在这种情况下，您无法设置您无法直接访问的元素的属性。所以我不会称这个解决方案为“差劲”。有时这是唯一的解决方案。 - undefined