Angular Material自定义组件获取主题主色失败，混入代码未生效

算力阿峰

2026-7-1

Angular Material自定义主题Mixin未生效排查与修复

核心问题

你定义了组件的color Mixin，但未将其关联到全局主题中，导致Mixin内的样式从未被编译生效，a标签始终显示基础样式的红色。

修复步骤

1. 将组件Mixin注入全局主题

Angular Material不会自动识别组件的主题Mixin，必须在全局主题文件中显式引入并调用：
修改theme.css（建议改为.scss后缀以匹配Sass语法），在对应主题区块添加以下代码：

// 引入组件主题文件（注意路径需匹配你的文件位置）
@use './path/to/_breadcrumbs-theme.component.scss' as breadcrumbs;

// 浅色主题注入组件样式
@include mat.all-component-themes($light-theme);
@include breadcrumbs.color($light-theme);

// 暗黑主题注入组件样式
.darkMode {
  @include mat.all-component-colors($dark-theme);
  @include breadcrumbs.color($dark-theme);
}

2. 修正主题配置的拼写错误

你的主题定义中把warn属性误写为avvisa，导致无法正确获取警告色值：

// 浅色主题修正
$light-theme: mat.define-light-theme(
  (
    color: (primary: $m6smart-primary, accent: $m6smart-accent, warn: $m6smart-warn),
  )
);

// 暗黑主题修正
$dark-theme: mat.define-dark-theme(
  (
    color: (primary: $m6smart-primary, accent: $m6smart-accent, warn: $m6smart-warn),
    typography: mat.define-typography-config(),
    density: 0,
  )
);

3. 优化样式优先级（可选）

移除!important，通过增强选择器优先级来覆盖基础样式，避免样式冲突：
修改_breadcrumbs-theme.component.scss：

@use 'sass:map';
@use '@angular/material' as mat;

// 给组件添加专属类名提升优先级
.breadcrumbs a,
.breadcrumbs a:hover,
.breadcrumbs a:active,
.breadcrumbs a:visited {
  color: red;
}

@mixin color($theme) {
  .breadcrumbs a,
  .breadcrumbs a:hover,
  .breadcrumbs a:active,
  .breadcrumbs a:visited {
    color: mat.get-theme-color($theme, warn, darker);
  }
}