如何为Angular mat-sidenav设置颜色？为何color属性无效？

核心原因 #

Angular Material的组件并非都内置支持color输入属性：

• mat-toolbar属于支持该属性的组件，它的API设计允许直接通过color关联主题调色板的primary/accent/warn值，自动应用对应的背景色和文本色。
• mat-sidenav本身没有定义color输入属性，所以直接添加color="primary"不会触发任何样式变化。

自定义mat-sidenav颜色的正确方法 #

你可以通过以下两种方式实现类似效果：

方法1：利用主题变量写自定义CSS类

在组件的样式文件（比如your-component.component.css）中添加：

.sidenav-primary {
  background-color: var(--mat-primary);
  color: var(--mat-on-primary); /* 自动匹配主题中primary色对应的文本色，保证可读性 */
}

然后修改模板中的sidenav标签，添加这个类：

<mat-sidenav class="sidenav-primary" #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
(closed)="events.push('close!')">
Sidenav content
</mat-sidenav>

方法2：通过Angular Material主题混合器定制

如果你的项目使用SCSS编写样式，可以在主题文件中扩展样式：

@use '@angular/material' as mat;

// 假设你已经定义了项目主题
$my-app-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    ),
  )
);

.sidenav-primary {
  @include mat.color($my-app-theme, primary);
}

同样在模板中给sidenav添加class="sidenav-primary"即可。

内容的提问来源于stack exchange，提问作者Riquelmy Arcanjo de Araújo