是什么原因导致升级 Angular 后<mat-form-field>元素的大小增加，我该如何解决？

What is causing the size increase in <mat-form-field> elements after upgrading Angular, and how can I fix it?

提问人：Eric M.C. 提问时间：5/25/2023 最后编辑：Robert BradleyEric M.C. 更新时间：5/29/2023 访问量：654

问：

我目前正在处理一个项目，在运行迁移工具后需要升级到最新的 angular 版本：

ng generate @angular/material:mdc-migration

所有元素看起来都更大，我试图用属性调整它们的大小，但它不起作用。height

在升级 angular 的版本之前：

Image 1

升级 angular 的版本后：

Image 2

此外，按钮看起来不同，但我发现我只需要添加属性即可使它们看起来更好。letter-spacing: 0px !important

这是 HTML 代码：

<mat-toolbar>
    <form [formGroup]="form" (ngSubmit)="login()">
        <mat-form-field appearance="outline" class="login" floatLabel="never">
            <input matInput type="text" formControlName="userEmailAddress" id="email" placeholder="Username" autofocus
                   [ngClass]="{'is-invalid' : submitted && (form.controls.userEmailAddress.hasError('email') || form.controls.userEmailAddress.errors?.required)}" size="30"
                   i18n-placeholder="User email input text | The user email address for login into the application.@@emailInput" maxlength="130">
            <mat-error *ngIf="submitted && (form.controls.userEmailAddress.hasError('email') || form.controls.userEmailAddress.errors?.required)">
                <small *ngIf="form.controls.userEmailAddress.hasError('email')"
                       i18n="Invalid email error text | Invalid email input text error notification@@errorText">Please provide a valid username</small>
                <small *ngIf="form.controls.userEmailAddress.errors.required"
                       i18n="Required email error text | Required email input text error notification@@requiredEmailErrorText">Username is required</small>
            </mat-error>
        </mat-form-field>
        <br>
        <button id="login-btn" mat-flat-button color="primary"
                i18n="login button | The text in the login button of the application.@@loginButton">
            Login
        </button>
    </form>
</mat-toolbar>

迁移工具将这些代码行保留为 TODO：

/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep.mat-mdc-form-field.mat-form-field-invalid .mat-form-field-label, small{
    color: rgba(black, 0.87);
}


/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
::ng-deep.mat-form-field-ripple {
    background-color: map-get($primary-color,800) !important;
}


/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep.mat-form-field-subscript-wrapper {
    margin-top: 0px !important;
}

/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep.mat-form-field-infix {
    border-top: 16px solid transparent !important;
    padding: 0 0 10px 0 !important;
}

我尝试将类替换为 ，我也尝试删除 ，但似乎没有任何效果。我还试图更改字体，但它只是调整了字体的大小，使整个字体更大：.mat-form-field.mat-mdc-form-field::ng-deepfont-size.mat-form-field.mat-form-field

改变：font-size

Image 3

CSS 角度 材料 MDC 组件 模板场

评论

0赞 DpGp 6/1/2023
嗨，埃里克，你是怎么解决的？我面临同样的问题？

答：

0赞 abidmix 5/25/2023 #1

升级到 mdc 组件后，我也面临同样的问题。看看这个使用组件密度的闪电战。它会稍微调整字段的大小，但不会去掉填充。

[html]

<div class="dense-1">
    <mat-form-field appearance="fill">
      <mat-label>Fill form field</mat-label>
      <input matInput placeholder="Placeholder" />
    </mat-form-field>
  </div>

  <div class="dense-2">
    <mat-form-field appearance="fill">
      <mat-label>Fill form field</mat-label>
      <input matInput placeholder="Placeholder" />
    </mat-form-field>
  </div>

ts

.dense-1 {
  @include mat.all-component-densities(-1);
}

.dense-2 {
  @include mat.all-component-densities(-2);
}

评论

0赞 DpGp 6/1/2023
嗨@Eric，我也面临同样的问题，你是怎么解决的？

上一个：如何使枚举出现在我的 Angular Mat-Form-Field 中？

下一个：垫标签文本溢出省略号不起作用，因此垫图标覆盖垫标签