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

Question

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

~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;
}

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

Angular material 10 date-picker (mat-datepicker) does not align with others input fields

datepicker

angular-material

angular