打开日历时出现Angular Material Datepicker设计问题答案

【问题标题】：Angular Material Datepicker design issue when opening calendar打开日历时出现Angular Material Datepicker设计问题
【发布时间】：2020-03-11 22:35:29
【问题描述】：

我在使用 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>

Datepicker 不在任何会改变其样式的 div 元素中。现在，我只选择年份和月份。将来，也有计划选择哪一天，那就是问题出现的时候。

【问题讨论】：

可能是一些 css 没有正确加载，请您在 stackblitz 中分享您的代码
对不起。我试过了，但它在 Stackblitz 中的行为不像在我的机器上那样。
我已经在 stackblitz 中复制了您的问题。你能查一下吗？

标签： javascript angular typescript datepicker angular-material2

【解决方案1】：

我认为你有你的自定义 css 用于 table 类，如

table-layout: fixed;
width: 150%;

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

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

检查下面的styles.css 文件供您参考check here

【讨论】：

我尝试了您的建议，它确实有效。我认为它必须对表格元素做一些事情。谢谢。