如何导入Angular Material Css

Question

我正在尝试在我的项目中使用Angular Material标签，标签已经导入，但并非所有的样式都被应用。

在我的HTML文件中:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

应该显示：

但是现在显示的是：

我已经在styles.css中添加了@import "~@angular/material/prebuilt-themes/indigo-pink.css";，日历显示正常了，但文本框仍然不太好看。

- matchifang

Answer 1

您需要遵循这里的所有步骤。 https://material.angular.io/guide/getting-started

试着将这一行添加到您的styles.css中：@import "~@angular/material/prebuilt-themes/indigo-pink.css";

从这一步开始：https://material.angular.io/guide/getting-started#step-4-include-a-theme

以下是您需要导入的内容：

import { MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule } from '@angular/material';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


@NgModule({    
imports: [BrowserModule, FormsModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, BrowserAnimationsModule],
...
})

- mahval

---

我添加了样式，日期选择器显示正常，但输入文本没有样式... 我会在问题中添加截图。 你知道我该怎么做来修复它吗？ - matchifang

请检查我的更新答案。注意 MatInputModule 的导入。如果您仍然有问题，请查看此 Stackblitz：https://stackblitz.com/edit/angular-wzbq2t - mahval

导入初始可能有点令人不安，但您很快就会掌握它的窍门！ - mahval