javascript - 打开日历时 Angular Material Datepicker 设计问题

Question

我在使用 Angular Material Datepicker 时遇到问题，但我似乎找不到它的根本问题。我想不出如何表达这个问题。每当我打开日历并选择日期时，叠加层太大并且超出了框的边界。希望所附图片可以提供帮助:

我在组件所在的模块中有以下导入:

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>

日期选择器不在任何会更改其样式的 div 元素中。现在，我只选择年份和月份。将来也有计划选择日子，那就是问题出现的时候。

Answer 1

我认为您有针对 table 类的自定义 css ，例如

table-layout: fixed;
width: 150%;

Angular 日期选择器也在内部使用表结构。所以它覆盖了 Angular Material 类的 css。

因此，在您的自定义 css 表中，使用 :not 类排除 'mat-calendar-table' 类。

检查下面的styles.css文件供您引用check here