angular-material - 如何删除空间底部垫形式字段

Question

我将 angular 7 与角 Material 一起使用，并且我想移除空间底部，如您所见。我尝试了很多方法但没有成功。

Answer 1

你可以在你的css中添加这个

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

NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly.Error and hint get inside the form-field.

不使用 ::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，而无需关闭 View 封装。但更优雅的方法是上面的一种