css - Angular 7 - 材质组件 CSS 未加载

Question

我正在开发一个新的 Angular 7 项目并尝试使用开箱即用的材料组件。

一些css没有被应用，我似乎无法找到原因。

例如，我有一个声明为 matInput，但没有应用样式，它看起来仍然像一个基本的 HTML 输入，但正在应用其他东西的样式，例如卡片。

这是我的 angular.json：

样式.scss

输入字段：

我是否缺少样式表或忘记了什么？为什么我的 matInput 没有被格式化？

标签： cssangularangular-materialmaterial-design

Answer 1

这是我过去如何声明的一个示例，希望它会有所帮助：

<form (submit)="onSaveProject(projectForm, projectForm.value)" #projectForm="ngForm" *ngIf="!isloading">
 <mat-form-field>
  <input matInput type="text" name="projectDescirption" 
  [ngModel]="project?.projectDescirption"
  required
  minlength="5"
  placeholder="Project Description"
  #projectDescirption="ngModel">
  <mat-error *ngIf="projectDescirption.invalid">Please descibe the project (minimum 5 characters)</mat-error>
 </mat-form-field>
</form>

还要确保你已经导入了模块，这里又是我过去如何做的一个例子：

应用程序模块.ts

import { 
 MatInputModule,
 MatCardModule,
 MatButtonModule,
 MatFormFieldModule,
 MatToolbarModule,
 MatExpansionModule,
 MatProgressSpinnerModule,
 MatPaginatorModule,
 MatDialogModule,
 MatOptionModule,
 MatSelectModule,
 MatDividerModule,
 MatCheckboxModule,
 MatSlideToggleModule,
 MatProgressBarModule,
 MatDatepickerModule,
 MatNativeDateModule
} from '@angular/material';

@NgModule({
 imports: [
  MatInputModule,
  MatCardModule,
  MatButtonModule,
  MatFormFieldModule,
  MatToolbarModule,
  MatExpansionModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatDialogModule,
  MatOptionModule,
  MatSelectModule,
  MatDividerModule,
  MatCheckboxModule,
  MatSlideToggleModule
]
})