Angular Material 10 日期选择器（mat-datepicker）与其他输入字段不对齐

Question

使用 Angular 10 和 Angular Material 10，在表单中使用日期选择器与其他输入表单字段不对齐，如下图所示：字段未对齐

~component.html 中的示例代码：

<mat-form-field color="primary" appearance="fill">
    <mat-label>Data Da</mat-label>
    <input matInput [matDatepicker]="picker1" [(ngModel)]="dataDa">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1 color="primary"></mat-datepicker>
</mat-form-field>

<mat-form-field class="example-form-field" appearance="fill">
    <mat-label>Ora Da</mat-label>
    <input matInput type="text" [(ngModel)]="oraDa">
</mat-form-field>

您尝试后是否也遇到同样的问题？

Answer 1

这似乎是一个错误。 我找到了这个解决方案： 在 ~component.scss 文件中我放置了这个 css 规则：

::ng-deep mat-datepicker-toggle.mat-datepicker-toggle button.mat-focus-indicator.mat-icon-button.mat-button-base {
  display: inherit;
}

Answer 2

我遇到了同样的问题，它似乎与在 dom 中渲染时的项目对齐有关，我解决了应用以下规则：

.mat-form-field.custom-class-name {
    .mat-form-field-wrapper {
        .mat-form-field-flex {
            align-items: normal;
        }
    }
}