I integrated mat-date into my Angular project, but encountered an issue where the styles of the calendar were not displaying properly when clicking the icon.
Here is the displayed calendar effect
I attempted to troubleshoot by commenting out the styles of other component libraries imported in styles.scss, yet the display effect of mat-date remained unchanged.
Does anyone have insight into why this might be happening? Thank you!
Below is a snippet of my code:
package.json
"@angular/material": "^17.3.3",
"@angular/material-moment-adapter": "^17.3.3",
index.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />styles.scss
@use '@angular/material' as mat;
@include mat.all-component-typographies();
@include mat.core();
date.component.html
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>