Angular Material侧边栏文字颜色设置无效，该如何修改？

问题概述 #

已完成Angular Material框架搭建，工具栏color属性可正常使用，但自定义主题配置后出现两个问题：

1. 给侧边栏容器添加color: white时样式被忽略，background: black可正常生效；
2. 保存主题文件后终端显示输出文件无变化，主题未生效。

代码片段 #

自定义主题SCSS #

@use '@angular/material' as mat;

@include mat.core();

$SspWebUi-primary: mat.define-palette(mat.$teal-palette, 900, 700);
$SspWebUi-accent: mat.define-palette(mat.$blue-gray-palette, 100, 50, 200);

$SspWebUi-warn: mat.define-palette(mat.$deep-orange-palette);

$SspWebUi-theme: mat.define-light-theme((color: (primary: $SspWebUi-primary,
    accent: $SspWebUi-accent,
    warn: $SspWebUi-warn,
)));
  
@include mat.all-component-themes($SspWebUi-theme);

组件HTML #

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav class="sidenav-nav" mode="side" opened>
    <mat-nav-list>
        <a mat-list-item>Pepper</a>
        <a mat-list-item>Salt</a>
        <a mat-list-item>Paprika</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
     <div>Hello from main content area</div>
  </mat-sidenav-content>
</mat-sidenav-container>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

组件CSS #

.sidenav-container {
  width: 100vw;
  height: calc(100vh - 50px);
}

.sidenav-nav {
  width: 12vw;
  text-align: center;
}

解决方案 #

1. 修复侧边栏文字颜色不生效问题 #

Angular Material组件（如mat-list-item）内部自带样式优先级高于父容器的继承样式，直接给.sidenav-nav设置color无法覆盖内部组件的文字颜色，需直接定位到目标元素：

修改组件CSS为：

.sidenav-container {
  width: 100vw;
  height: calc(100vh - 50px);
}

.sidenav-nav {
  width: 12vw;
  text-align: center;
  background: black; /* 保留背景设置 */
}

/* 直接定位到mat-list-item设置文字颜色 */
.sidenav-nav .mat-list-item {
  color: white;
}

若仍存在样式冲突，可临时使用!important（非推荐方案，仅作应急）：

.sidenav-nav .mat-list-item {
  color: white !important;
}

2. 修复主题文件无输出变化问题 #

检查主题文件导入配置

打开angular.json，确认主题SCSS文件已添加到项目样式列表：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.scss",
            "src/path-to-your-theme/theme.scss" // 替换为你的主题文件实际路径
          ]
        }
      }
    }
  }
}

清除缓存并重启服务

终端执行命令重启开发服务，清除可能存在的缓存：

ng serve --no-cache

确认SCSS语法与版本兼容性

• 若使用Angular Material 12以下版本，需改用@import语法替代@use：

  @import '@angular/material/theming';
  
  @include mat-core();
  
  $SspWebUi-primary: mat-palette($mat-teal, 900, 700);
  $SspWebUi-accent: mat-palette($mat-blue-gray, 100, 50, 200);
  $SspWebUi-warn: mat-palette($mat-deep-orange);
  
  $SspWebUi-theme: mat-light-theme($SspWebUi-primary, $SspWebUi-accent, $SspWebUi-warn);
  
  @include angular-material-theme($SspWebUi-theme);
  

• 检查主题文件是否存在语法错误（如括号不匹配、变量名拼写错误），语法错误会导致编译失败且终端可能无明确提示。

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