Угловые материалы без применения темы на странице

Question

Я сейчас использую Угловой материал . Я хочу создать тему для своей страницы, используя готовые темы, и хочу, чтобы она выглядела как this . Однако страница по-прежнему отображается серым цветом. Как я получил применение тем? Я добавил это

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

в файл styles.css. Я попытался сделать color="primary" в моем app.component.html, но безрезультатно. Ниже приводится 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';