如何删除空间底部垫形式场答案

【问题标题】：How to remove space bottom mat-form-field如何删除空间底部垫形式场
【发布时间】：2019-05-10 02:51:39
【问题描述】：

我使用 angular 7 和 angular 材料，我想移除空间底部，如您所见。我尝试了很多方法，但没有成功。

【问题讨论】：

【解决方案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 添加到全局样式表中。但更优雅的方法是上面的那个。

【讨论】：

使用 !important 否则它将不起作用。 => 边距底部：-1.25em !important;
您无需输入 !important 即可。因为 Angular 材料编写的 .mat-form-field-wrapper 样式中没有边距底部，即使它们有任何边距底部样式（默认情况下不是 !important），因为我们使用自定义类包装 mat-form-field，例如在这里我的表单域'
@Isuru Dilshan 如果它仍然无法正常工作。你能给我一个 Stackblitz 或任何其他在线 IDE 的例子吗？
我使用 Angular 10.0.3。没有 !important 它不起作用。但你的答案是我找到解决这个问题的唯一答案。谢谢你
我并不是说它没有 .mat-form-field-wrapper 的 css 我的意思是它没有带有任何边距底部样式的 css。我真的很困惑为什么它不适用于 Angular 10。我已经将它与最新的 Angular 材料一起使用。请检查这个stackblitz，它使用了最新的角材料。

【解决方案2】：

尝试以下方法：

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

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

【讨论】：

【解决方案3】：

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

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

另外，我使用了外观=“outline”，对于其他外观，可能需要更改其他css类和属性，因为它可能有其他元素。

【讨论】：

【解决方案4】：

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

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 关键字是必需的，否则它只会引入默认值。

【讨论】：

我必须将其放入 styles.scss 而不是 my.component.scss 才能使其与 angular 11 一起使用

【解决方案5】：

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

【讨论】：

【解决方案6】：

或者简单地说：

html

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

css

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

【讨论】：

不错！我正在尝试 padding-bottom: 0 但它不起作用，谢谢！

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

你可以在css中添加重要的

【讨论】：

【解决方案10】：

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

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

@include mat-core($typography);

【讨论】：

【解决方案11】：

与mat-spinnner 一起使用时，我遇到了与mat-fab 按钮类似的问题。每当微调器被“激活”时，周围的元素就会向下移动。问题出在.mat-fab .mat-button-wrapper 上，它来自渲染后mat-spinner 的嵌入式包装span 元素。

设置，

::ng-deep .mat-fab .mat-button-wrapper {
  padding: 0;
  vertical-align: middle;
}

解决了这个问题。 vertical-align 不是必需的，但可以很好地对齐带有 mat-fab 按钮的微调器。

【讨论】：

【解决方案12】：

下面的模板呢：

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

【讨论】：