如何删除空间底部垫形式字段 [英] How to remove space bottom mat-form-field

问题描述

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

解决方案

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

::ng-deep .mat-form-field-wrapper{底边距:-1.25em；}

<块引用>

注意:当你删除空格时，你不能把 hint 或 错误</mat-error> 正确.错误和提示进入表单域.

不使用 ::ng-deep(用于 Angular 8)

关闭您在其中更改填充的组件的封装.

你可以这样做

import {Component,ViewEncapsulation} from '@angular/core';@成分({选择器:'示例'，templateUrl: 'example.component.html',styleUrls: ['example.component.css'],封装 : ViewEncapsulation.None,})导出类 ExampleComponent {}

将要设置样式的组件包装在自定义类中.所以它不会影响任何其他 mat-form-field 组件.现在让我们用 my-form-field 类来包装它

<input matInput placeholder =输入"></mat-form-field>

.my-form-field .mat-form-field-wrapper {底边距:-1.25em；}

您可以在全局样式表中添加这些 css，而无需关闭视图封装.但更优雅的方法是上面的一种.

I use angular 7 with angular material and i want to remove the space bottom as you can see. I tried many way but no sucess.

解决方案

You can add this in your 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.

Without using ::ng-deep( for Angular 8 )

Turn off encapsulation of your component inside which you change the padding.

You can do this by

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

Wrap the component you want to style in a custom class. So it wont affect any other mat-form-field components. Let's wrap this with with my-form-field class for now

<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;
}

You can add these css in global stylesheet without turning off view encapsulation. But the more elegant method is the above one.

这篇关于如何删除空间底部垫形式字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！