angular-material - 如何导入 Angular 材质 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>

它应该显示：

但它显示：

我添加@import "~@angular/material/prebuilt-themes/indigo-pink.css";到 styles.css 并且日历显示正常，但文本字段看起来仍然很糟糕。

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],
...
})