仅当启用 Ivy 时，Angular 9 升级才会导致 matPrefix 和 mat-form-field 出现样式问题

Question

将我的项目从 Angular 8 更新到 9 后，一些 Angular Material 垫表单字段控件最终出现了奇怪的样式问题。

将生成的代码与旧的 Angular 8 版本进行比较时，我注意到 Material 输入控件中添加了一些新的 css 类(例如:ng-tns-c157-20)。有很多，我发现了一个类似的问题here .有一种解决方法可以清除那些新引入的样式类。但这在这种情况下没有帮助。

这仅在启用 Ivy 时发生，如果我从编译器选项中禁用 Ivy，则不会发生并且一切正常。

其中一个问题是输入表单域内的图标前缀与标签/占位符重叠。

当在编译器选项中禁用 Ivy 时，它会发生如下变化，就像在 Angular 8 中一样。

看起来有类似的错误bug raised in 2018并且仍然开放。但是，我的问题仅在启用 Ivy 时发生。

这是我生成输入控件的模板的一部分。

<ng-container *ngIf="formField; else standalone">
    <mat-form-field [appearance]="formField.appearance" [color]="formField.color" [floatLabel]="formField.floatLabel"
        [formGroup]="formField.formGroup" [hideRequiredMarker]="formField.hideRequiredMarker" [hintLabel]="formField.hintLabel">
        <mat-label *ngIf="formField.label">{{formField.label}}</mat-label>
        <ng-template *ngIf="formField.prefix" matPrefix hspElement [context]="context"
            [element]="formField.prefix" (command)="onCommand($event)"></ng-template>
        <input matInput
            [attr.id]="getValue('id')" [ngClass]="getValue('cssClass')" [style.display]="getValue('hidden')?'none':undefined"
            [attr.fieldName]="getValue('placeholder')||undefined" [attr.placeholder]="getValue('placeholder')||undefined"
            [formControlName]="controlName" [required]="required"
            [attr.maxLength]="getValue('maxLength')||undefined" [attr.minLength]="getValue('minLength')||undefined"
            [attr.readonly]="getValue('readOnly')||undefined" [type]="type" (keypress)="onKeyPress($event)" />
        <ng-template *ngIf="formField.suffix" matSuffix hspElement [context]="context"
            [element]="formField.suffix" (command)="onCommand($event)"></ng-template>
        <ng-container *ngFor="let validator of validators" ngProjectAs="mat-error">
            <mat-error *ngIf="hasError(validator)">{{getError(validator)}}</mat-error>
        </ng-container>
    </mat-form-field>
</ng-container>

如下禁用 Ivy 可解决问题:

angularCompilerOptions": {
    ....
    "enableIvy": false
  }

我更感兴趣的是 Ivy 为什么要改变样式。根据 Angular 9 更新说明，这是一项底层改进。

有人遇到过吗？有谁知道除了禁用 Ivy 或使用 !important 添加样式之外是否有解决方法？

Answer 1

在style.scss中使用这些样式

.mat-form-field-appearance-fill:not(.mat-focused) .mat-form-field-label {
  margin-top: 0;
}

.mat-form-field-appearance-outline:not(.mat-focused) .mat-form-field-label {
  margin-top: 0.25em;
}

或者，如果你想将它用于单个组件，将其放入 component.scss 并将组件的 encapsulation 设置为 ViewEncapsulation.None

漏洞:https://stackblitz.com/edit/angular-xfexy1

使用 style.scss 修复:https://stackblitz.com/edit/angular-xfexy1-joi5v4

使用 component.scss 修复:https://stackblitz.com/edit/angular-xfexy1-khj6mi