问题
I am having an issue when using Angular Material Datepicker and I can't seem to find the root problem of it. I couldn't think of a way to word this question. Whenever I open the calendar and I'm selecting the day, the overlay is too large and is past the boundaries of the box. Hopefully, this attached image can help:
I have the following imports in the module the component is in:
import { MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule, MatOptionModule } from '@angular/material';
import { MomentDateModule } from '@angular/material-moment-adapter';
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
The Datepicker is not in any div element that would change its styling. Right now, I'm only selecting a year and month. In the future, there are plans to select the day, as well, and that is when the issue arises.
回答1:
I think you have your custom css for table class like
table-layout: fixed;
width: 150%;
Angular date picker is also internally using the table structure.
so it override's the css of the angular material classes.
so in your custom css table exclude the class 'mat-calendar-table' by using :not class.
check below styles.css file for your reference check here
来源：https://stackoverflow.com/questions/60637322/angular-material-datepicker-design-issue-when-opening-calendar