Angular Material 不应用样式答案

【问题标题】：Angular Material not applying stylesAngular Material 不应用样式
【发布时间】：2020-07-27 22:17:19
【问题描述】：

我已按照有关如何安装角材料的指南进行操作。首先我通过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 的导入后，它现在看起来像这样，与教程仍然不同：

【问题讨论】：

嗨伙计，如果这解决了你的问题，你能给出任何回应吗？问候
你有没有停止服务并保留:)
是的，该字段看起来确实与以前不同，但与模板不同。我导入了粉色和蓝灰色模板，所以不应该都是深色的吗？
我为你准备了一个stackblitz --> stackblitz.com/edit/angular-ivy-y739ny 背景应该是灰色的。你应该看到后缀日历图标。
是的，这就是我所期望的 :)

标签： angular angular-material

【解决方案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 指令可以看到您需要它们。

问候

【讨论】：

感谢您的回答！不幸的是，它仍然不像预期的那样:(我会更新原帖