MatToolbar 颜色不适用于 Angular Material v18 红色/玫瑰色

Question

我刚刚将 Angular CLI 和 Angular Material 升级到 v18。除了

MatToolbar

之外，所有 Angular Material 组件都工作正常。问题是

color

输入在

mat-toolbar

标签中没有执行任何操作。目前工具栏颜色与白色背景非常接近，只能看到一点阴影。

这是代码。

<mat-toolbar color="primary"></mat-toolbar>

有人遇到同样的问题吗？有找到解决办法吗？

提前致谢。

我试过了

• 创建了一个新项目以确保没有全局/本地 CSS 干扰。
• 在CSS中手动设置一个

  background-color: red

  ，效果很好。

期待 工具栏看起来像带有

Rose/Red

主题的 Angular 网站。 https://material.angular.io/components/toolbar/overview

Answer 1

此文档来自

material.angular.io/src/app/shared/navbar /_navbar-theme.scss

我们可以使用下面提供的 mixin 并手动设置所需的

background-color

。请参阅链接中的示例 scss 文件以获取更多选项。

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$rose-palette,
      tertiary: mat.$red-palette,
    ),
  )
);

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

@mixin theme($theme) {
  app-navbar {
    color: mat.get-theme-color($theme, primary);

    mat-toolbar {
      background: mat.get-theme-color($theme, primary-container);
    }
  }
}

:root {
  @include mat.all-component-themes($theme);
  @include theme($theme);
}

Stackblitz 演示