角材料不应用样式

Question

我已经按照指南安装了角材。 首先，我通过cli添加了

ng添加@ angular / material

在app.module.ts中，我添加了以下几行：

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



imports: [
    [...],
    MatDatepickerModule,
    MatNativeDateModule 
  ],
  providers: [MatDatepickerModule, MatNativeDateModule],

在我的HTML文件中，我试图创建一个datetimepicker

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

不幸的是，样式根本不起作用。看起来像这样：

我想念什么吗？

预先感谢

---

编辑： 添加了MatFormFieldModule和MatInputModule的导入后，现在看起来像这样，与本教程仍然不同：

Answer 1

要正确显示正确的样式，还需要将MatFormFieldModule和MatInputModule导入到app.module.ts文件中，如下所示：

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';    

imports: [
    [...],
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
providers: [MatDatepickerModule, MatNativeDateModule]

您可以通过分析由<mat-form-field></mat-form-field>组成的html和<input>标签上带有matInput指令的html来查看是否需要它们。

致谢