如何删除空间底垫形成场

Question

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

Answer 1

在角度9中，我只能通过将以下内容添加到component.scss中来消除间隙（其他答案在我的情况下不起作用）：

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

此外，我使用的是“外观=“概述”，对于其他外观，可能有必要更改其他CSS类和属性，因为它可能包含其他元素。

Answer 2

我通过 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;
     }

Answer 3

您可以在CSS中添加它

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

但是当您删除此填充时，您将无法正确放置<mat-hint>hint</mat-hint>或<mat-error>error</mat-error>。 删除填充时，错误和提示进入表单域；

Answer 4

尝试以下操作：

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

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

Answer 5

您可以像这样将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>

Answer 6

或者简单地说：

html

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

css

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

Answer 7

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

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

Answer 8

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

您可以在CSS中添加重要内容

Answer 9

我的解决方案是使用其他类。

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关键字是必需的，否则它将直接使用默认值。

Answer 10

通过更改带有材质主题的字体大小，您将获得较小的输入

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

@include mat-core($typography);