Html 角材料扩展面板不适用于不同的部件

我用有棱角的材料开始我的旅程，我被一件事困住了

扩展面板不工作。我看到此面板，但无法打开/关闭它。我发现它不起作用，因为当我删除导航组件扩展面板工作时，导航组件是用我在该组件中导入的材料创建的

是的，我用过

import {MatExpansionModule} from '@angular/material/expansion';

这是带有扩展面板的组件

<app-navigation-bar></app-navigation-bar>
<section id="faq">
  <h2>FAQ</h2>
  <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          This is the expansion title
        </mat-panel-title>
        <mat-panel-description>
          This is a summary of the content
        </mat-panel-description>
      </mat-expansion-panel-header>

      <p>This is the primary content of the panel.</p>

    </mat-expansion-panel>
</section>

这是导航组件的代码

<section id="navigation-bar">
  <mat-drawer-container class="example-container">
    <mat-drawer class="left-nav" mode="side" opened>
      <button class="nav-button"><i class="far fa-play-circle"></i></button>
      <button class="nav-button"><i class="fab fa-500px"></i></button>
      <button class="nav-button"><i class="fas fa-broadcast-tower"></i></button>
      <button class="nav-button"><i class="fas fa-film"></i></button>
      <button class="nav-button"><i class="fas fa-microphone"></i></button>
      <button [routerLink]="['/faq']" routerLinkActive="router-link-active"  class="nav-button"><i class="fas fa-info"></i></button>
      <button [routerLink]="['']" routerLinkActive="router-link-active"  class="nav-button" id="exit"><i class="far fa-times-circle"></i></button>

    </mat-drawer>
    <mat-drawer-content class="right">
    </mat-drawer-content>
  </mat-drawer-container>
</section>

---

我想出来了。当您在站点上为一个元素制作组件时，请确保它没有宽度：100%；它会在网站上产生箔片效果。您不能单击任何按钮，因为所有内容都在该组件下。

似乎您还没有导入样式@导入“@angular/material/prebuild themes/indigo pink.css”；在您的style.css中