Angular Material MatDatePicker isn't using the correct CSS in ionic project

Question

So I'm trying to use Angular's MatDatePicker in my Ionic 5 app in 2 different pages and want them to be displayed with different CSS.

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

If I switch to the other site then, it still uses the CSS of the first page. Screenshot of the 2nd page where it's displayed incorrectly.

When I open the app in my browser using ionic serve and reload the page, it uses the correct CSS and displays it correctly. The problem obviously is, that I can't just reload the page on a mobile device since it's an app. (+ it would be very inconvenient IF it worked)

I imported the MatDatePicker 2 times (in the corresponding module of each site). Maybe that's a problem?

HTML of my 1st page, where it's displayed correctly:

  <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 of my 1st page:

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 of my 2nd page, where it's displayed incorrectly:

 <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 of my 2nd page:

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

So as you can see I disabled almost everything of the MatDatePicker in my first page but want it to be displayed in my 2nd page.

I hope you can help me as this is my first ionic app and it's supposed to be an app for our school so the teachers and other students can see their timetable and other stuff on their mobile device.

Link to the full project (with german function names and comments): https://github.com/Ponynjaa/KlaTab

Angular Material MatDatePicker isn't using the correct CSS in ionic project

0 Answers0