Angular Material MatDatePicker 在离子项目中没有使用正确的 CSS

问题描述

所以我试图在我的 Ionic 5 应用程序中的 2 个不同页面中使用 Angular 的 MatDatePicker，并希望它们以不同的 CSS 显示。

Here's a screenshot of the first page,where it uses the correct CSS。

如果我切换到另一个站点，它仍然使用第一页的 CSS。 Screenshot of the 2nd page where it's displayed incorrectly。

当我使用 ionic serve 在浏览器中打开应用程序并重新加载页面时，它使用正确的 CSS 并正确显示。问题显然是，我不能只是在移动设备上重新加载页面，因为它是一个应用程序。 （+如果它有效的话会很不方便）

我导入了 MatDatePicker 2 次（在每个站点的相应模块中）。也许这是一个问题？

我第一页的 HTML，它正确显示：

  <mat-form-field [ngClass]="{'dark':dark}">
    <input matInput [matDatepicker]="matDatepicker" [matDatepickerFilter]="datefilter" [(ngModel)]="datum"
      (dateInput)="onChangeDatum()">
    <mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle>
    <mat-datepicker #matDatepicker></mat-datepicker>
  </mat-form-field>

我第一页的 CSS：

mat-form-field {
    width: 0.8em;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0.5em;
    margin-top: 0.25em;
    margin-bottom: 0;
}

::ng-deep .mat-focused .mat-form-field-label {
    display: none !important;
}

::ng-deep.mat-form-field-underline {
    display: none !important;
}

::ng-deep.mat-form-field-ripple {
    display: none !important;
}

::ng-deep .mat-form-field-label {
    display: none !important;
}

mat-datepicker-toggle {
    color: black !important;
}

.dark mat-datepicker-toggle {
    color: white !important;
}

我的第二页的 HTML，显示不正确：

 <mat-form-field [ngClass]="{'dark':dark}">
   <mat-label>Datum ausw&auml;hlen</mat-label>
   <input [ngClass]="dark?'text-light':'text-dark'" matInput [matDatepickerFilter]="datefilter"
     [matDatepicker]="picker" [(ngModel)]="inputDatum" (dateInput)="onChangeDatum()" disabled>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker disabled="false"></mat-datepicker>
 </mat-form-field>

我第二页的 CSS：

.dark ::ng-deep .mat-focused .mat-form-field-label {
    color: white !important;
}

.dark ::ng-deep.mat-form-field-underline {
    background-color: white !important;
}

::ng-deep.mat-form-field-ripple {
    background-color: white !important;
}

.dark ::ng-deep .mat-form-field-label {
    color: white !important;
}

.dark mat-datepicker-toggle {
    color: white !important;
}

::ng-deep.mat-form-field-underline {
    background-color: black !important;
}

mat-datepicker-toggle {
    color: black !important;
}

如您所见，我在第一页中禁用了几乎所有 MatDatePicker，但希望它显示在我的第二页中。

我希望你能帮助我，因为这是我的第一个 ionic 应用程序，它应该是我们学校的应用程序，以便教师和其他学生可以在他们的移动设备上查看他们的时间表和其他内容。

完整项目的链接（带有德语函数名称和注释）：https://github.com/Ponynjaa/KlaTab

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）