角材料未将主题应用于页面

Question

我当前正在使用Angular Material。我想使用预先构建的主题来为页面设置主题，并使其看起来像this。但是，page仍显示为灰色。我如何应用主题？我已经添加了

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

到styles.css文件。我尝试在我的app.component.html中进行color="primary"，但无济于事。以下是app.component.html

<mat-sidenav-container color="primary" fullscreen>
<mat-sidenav #sidenav mode="side">
    <p><button mat-button class="nav-link" routerLink="/home" routerLinkActive="active" color="primary">Home</button></p>
    <p><button mat-button class="nav-link" routerLink="/menu" routerLinkActive="active" color="primary">Menu</button></p>
</mat-sidenav>
<mat-sidenav-content color="primary">
  <p><button mat-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button></p>
  <div class="container">
      <div class="row">
        <router-outlet></router-outlet>
      </div>
    </div>
</mat-sidenav-content>

Answer 1

将此行添加到styles.css文件

  @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

在polyfills.ts中添加

import 'hammerjs';