为什么我的 Angx-mat-datetime-picker 和 mat-datepicker 的 css 在同一页面上会发生冲突？

Question

我有两个相同表单的输入字段。一个是 ngx-mat-datetime-picker，另一个是 mat-datepicker。 它们单独工作正常，但如果我第二次打开它们，我第一次打开的CSS会出现混乱。

代码：

<div class="row">
    <div class="col-3">
        <mat-form-field appearance="outline">
            <mat-label>Schlusstag</mat-label>
            <input matInput [ngxMatDatetimePicker]="schlusstag" placeholder="schlusstag"
                [formControl]="fc.schlusstag" />
            <mat-datepicker-toggle matSuffix [for]="schlusstag"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker #schlusstag></ngx-mat-datetime-picker>
        </mat-form-field>
    </div>
</div>
<div class="row">
    <div class="col-3">
        <mat-form-field appearance="outline">
            <mat-label>Valuta</mat-label>
            <input matInput [formControl]="fc.valuta" placeholder="Valuta" maxlength="10" [matDatepicker]="valuta"
                autocomplete="off" />
            <mat-datepicker-toggle matSuffix [for]="valuta"></mat-datepicker-toggle>
            <mat-datepicker #valuta></mat-datepicker>
        </mat-form-field>
    </div>
</div>

用例1： 我打开 ngx-mat-datetime-picker 选择一个日期，然后单击“应用”。然后我打开 mat-datepicker 选择一个时间。到目前为止一切正常。然后我打开 ngx-mat-datetime-picker，它看起来像这样：

用例2： 我打开 mat-datepicker 选择一个值，然后打开 ngx-mat-datetime-picker 并选择一个值。当我打开 mat-datepicker 后，它的 CSS 就混乱了： 。

我在控制台中没有错误，也不知道为什么它们会搞乱彼此的 CSS。

Answer 1

我刚刚在一个带有

Angular 14

v8

 的 

@angular-material-components/datetime-picker

项目中偶然发现了这个问题

查看 github 问题，其他人提出了解决方法。我使用了以下样式，它似乎已经解决了我的问题：

mat-calendar .mat-calendar-body-cell {
    height: 100%;
    position: absolute;
}