Angular material 如何删除空间底部垫表单字段

---

我使用带角材质的angular 7，我想移除空间底部，如你所见。我尝试了很多方法，但都没有成功。

您可以将此添加到css中

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

注意：删除空格时，无法正确放置

hint

或

error

。 错误和提示进入表单字段

不使用

：ng deep

（用于角度8）

关闭更改填充的组件的封装

你可以这样做

从'@angular/core'导入{Component，ViewEncapsulation}；
@组成部分({
选择器：“示例”，
templateUrl:'example.component.html'，
样式URL:['example.component.css']，
封装：视图封装。无，
})
导出类ExampleComponent{}

在自定义类中包装要设置样式的组件。因此，它不会影响任何其他

mat表单字段

组件。 现在让我们用

我的表单字段

类来包装它

尝试以下操作：

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



（您可以按照这里关于这个额外底部空间的讨论：）
我可以通过在style.scss中使用以下css来删除mat表单字段的底部空间

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

您可以在css中添加重要内容
我的解决方案是使用一个附加类

HTML:

这个！很遗憾，重要关键字是必需的，否则它只会拉入默认值。
您可以将height:4em添加到mat form字段，如下所示：

    <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 9中，我只能通过在component.scss中添加以下内容来消除间隙（其他答案在我的情况下不起作用）：

：主机：：ng deep.mat表单字段包装器{
边距：0！重要；
填充：0；
}

另外，我使用的是appearance=“outline”，对于其他外观，可能需要更改其他css类和属性，因为它可能有其他元素。
通过使用材质主题更改字体大小，您将获得更小的输入

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

@include mat-core($typography);

我用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>

或者简单地说：

html


...

css

。没有底部{
保证金底部：-1.25em！重要；
}
使用！重要提示：否则它将不起作用。=>保证金底部：-1.25em！重要的；你不需要把它放进去！这对工作很重要。由于
.mat form field wrapper
样式中没有边距底部，即使它们具有任何边距底部样式（默认情况下不重要），因为我们使用自定义类包装
mat form field
，在这里，例如'my form field'，@Isuru Dilshan，如果它仍然不起作用。你能给我举一个Stackblitz或任何其他在线IDE的例子吗？我使用Angular 10.0.3。没有！重要的是，它不起作用。但你的答案是我找到的唯一解决这个问题的答案。谢谢，我不是说它没有
.mat表单字段包装器的css，我是说它没有任何页边底部样式的css。我真的很困惑为什么它不适用于Angular 10。我用过最新的角材料。请检查这个使用最新的角材料。
$typography: mat-typography-config(
  $input: mat-typography-level(14px, 1.125, 400),
);

@include mat-core($typography);

: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>

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