Angular Material v18中MatToolbar color属性失效问题求助

问题场景 #

• Angular CLI与Angular Material均升级至v18版本
• 仅<mat-toolbar>的color输入属性完全失效，工具栏颜色接近白色，仅能看到微弱色差
• 其他组件（如<button mat-button color="primary">、<mat-icon color="primary">）的color属性正常工作
• 手动为mat-toolbar设置background-color: red有效，且新建空白项目仍存在该问题
• 期望实现Angular Material官网的主题色工具栏效果

原因分析 #

Angular Material 18对Toolbar组件的主题样式逻辑做了调整：默认情况下，mat-toolbar不再自动将color属性映射为主题的primary/accent/warn背景色，而是需要通过主题配置显式启用，或者使用特定CSS类来指定。

解决方案 #

方案1：全局主题配置启用（推荐）

在项目的主题SCSS文件（通常为src/styles.scss）中，为Toolbar组件显式指定主题颜色：

@use '@angular/material' as mat;

// 定义你的主题（以官网Rose主题为例）
$rose-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$rose-palette),
      // 可按需添加accent、warn等配置
    ),
    components: (
      mat-toolbar: (
        color: 'primary', // 指定Toolbar使用primary色作为背景
      )
    )
  )
);

// 应用主题到所有组件
@include mat.all-component-themes($rose-theme);

方案2：直接使用内置CSS类

无需修改全局主题，给mat-toolbar添加对应的颜色类即可：

<mat-toolbar class="mat-primary"></mat-toolbar>
<!-- 切换为accent或warn颜色 -->
<mat-toolbar class="mat-accent"></mat-toolbar>
<mat-toolbar class="mat-warn"></mat-toolbar>

方案3：自定义样式覆盖

如果需要更灵活的颜色控制，可通过SCSS变量自定义背景色：

@use '@angular/material' as mat;

// 假设已定义$rose-theme
mat-toolbar.mat-primary {
  background-color: mat.get-color-from-palette($rose-theme.color.primary, 500);
}

验证 #

修改完成后重启开发服务器（ng serve），即可看到mat-toolbar正确应用主题颜色，与官网示例效果一致。

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