从 mat-form-field 填充和删除边距的正确方法

Question

我正在尝试对用户个人资料中的名字和姓氏执行内联编辑功能。我的布局如下所示：

然而，当我从使用标准输入标签切换到使用 mat-form-field （就像我想用于材料一样）时，用户详细信息最终看起来像这样：

我尝试使用各种 CSS 来尝试将其落实到位，但我无法将所有内容恢复到用户详细信息行中。

在检查器中检查它，我发现有一个正在使用的 .mat-form-field-infix 类，但我无法覆盖它包含的 padding 和 border-top 属性。我不知道如何处理改变 mat-X 元素，因为似乎材料更适合保持事物的原样。

我会喜欢一些想法。

超文本标记语言

<div fxLayout="column">
    <div fxLayout="row"><span>{{user?.email}}</span></div>
        <div fxLayout="row">
            <div fxLayoutAlign="space-between">
                <form [formGroup]="formGroup">
                    <mat-form-field>
                        <input matInput
                               formControlName="firstName"
                               value="{{user?.firstName}}"/>
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput
                               formControlName="lastName"
                               value="{{user?.lastName}}"/>
                    </mat-form-field>
                </form>
            </div>
            <div>
                <button *ngIf="!edit" mat-icon-button (click)="editClicked()">
                    <mat-icon matTooltip="Edit User">edit</mat-icon>
                </button>
            </div>
        </div>
    </div>

CSS

Answer 1

以下是如何删除 上的默认填充mat-form-field：

在你的全局 styles.css 中添加以下规则：

.mat-form-field-no-padding .mat-form-field-wrapper {
  margin-bottom: -1.25em;
}

现在添加mat-form-field这个类mat-form-field-no-padding