Angular 13 Material Datepicker 无法正确应用样式

Question

我一直在尝试学习如何使用 angular 13 datepicker，但我不明白什么不能正常工作。

这是我的主要模块。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
  AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ...
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [
    MatDatepickerModule,
    MatNativeDateModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我使用的代码，基于本教程：

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

这就是它的样子： 1

而且我真的不明白我错过了什么以及为什么它看起来不像它应该的那样。

谢谢！

Answer 1

你能检查所有css东西是否正确安装了角度材料吗？ 如果添加了角度材料，请检查您的 styles.css。 你的 package.json 文件中有 @angular/core 吗？

您可以检查的另一件事是您的日期选择器是否由 mat-form-field 包裹。 它应该如下所示：

<mat-form-field appearance="fill">
  <input matInput [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker ></mat-datepicker>
</mat-form-field>

Answer 2

您需要导入要在材质组件中使用的主题。

例如，您可以使用

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

为您的全球 CSS。

也遇到过这个问题。 --> Angular 5 材质 2：Datepickerstyle

有关 Prebuild 主题的更多信息 --> https://v6.material.angular.io/guide/theming#using-a-pre-built-theme