Angular中Header与Sidenav组件样式在Dashboard中失效问题排查

1. 补全Sidenav容器并设置背景色 #

你当前的app-sidenav组件只有mat-nav-list，但Angular Material的侧边栏需要mat-sidenav作为容器，默认背景是白色。补全如下：

• 修改sidenav.component.html：

<mat-sidenav class="sidenav-wrap" mode="side" opened>
  <mat-nav-list>
    <!-- 原有内容不变 -->
  </mat-nav-list>
</mat-sidenav>

• 在sidenav.component.scss添加容器样式：

.sidenav-wrap {
  background-color: #2c3e50; /* 替换成你需要的深色背景 */
  width: 250px;
  height: 100vh;
}

2. 修正RouterLinkActive类名错误 #

你HTML里用的是list-item-activate，但SCSS里写的是.list-item-active——单词拼写错了！把所有routerLinkActive的值改成list-item-active：

<a mat-list-item routerLink="/dashboard" routerLinkActive="list-item-active">
  <mat-icon>dashboard</mat-icon>Dashboard
</a>

3. 确认组件样式隔离与优先级 #

Angular默认会隔离组件样式，如果你想在Dashboard里控制Sidenav样式，要么：

• 优先在sidenav.component.scss里写全样式（组件内聚，推荐）
• 或者在dashboard.component.scss用::ng-deep穿透隔离（不推荐，影响全局）：

::ng-deep app-sidenav .mat-nav-list {
  background-color: #2c3e50;
}

4. 检查Material主题引入 #

如果全局样式没正确引入Material主题，也会导致默认样式异常。在styles.scss里添加：

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
/* 可选其他深色主题：indigo-pink.css、pink-bluegrey.css */

内容的提问来源于stack exchange，提问作者Elfo