angular - MatDatePicker 显示在页面底部并且样式损坏

Question

我正在使用 angular 8。在我的 app.module.ts 中，我添加了：

import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material';

我将它们添加到@NgModuel 导入中

在组件 html 中，我有：

<input [matDatepicker]="LMPDatepicker" formControlName="LMP" class="t-field t-field--date menstural-field" aria-labelledby="menstural_LMP" max="{{lmpmax}}" min="{{lmpmin}}">
<mat-datepicker-toggle [for]="LMPDatepicker"></mat-datepicker-toggle>
<mat-datepicker #LMPDatepicker></mat-datepicker>

当我单击切换时，它会滚动到打开日期选择器的页面底部，并且确实正确选择了日期，但是样式和位置完全搞砸了......

这发生在我添加日期选择器的项目中的任何地方。

标签： angulardatepickerangular-material

Answer 1

添加@import '@angular/material/prebuilt-themes/indigo-pink.css'后；到styles.css 一切正常。https://material.angular.io/guide/theming