Angular 18自定义M3主题应用失败，部分元素仍保留原主题颜色

1. 调整主题应用层级 #

将主题混合器移至:root选择器内，确保自定义主题样式优先级高于内置主题：

@use '@angular/material' as mat;
@use './m3-theme';

@include mat.core();

:root {
  --mat-sidenav-container-width: 72px;
  // 将主题混合器移至全局根选择器
  @include mat.core-theme(m3-theme.$dark-theme);
  @include mat.all-component-themes(m3-theme.$dark-theme);
}

html {
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
}

2. 移除重复的主题混合器 #

mat.all-component-themes已经包含所有Angular Material组件的主题样式，无需单独调用mat.button-theme，重复调用可能引发样式冲突。

3. 清理内置主题残留引用 #

检查angular.json配置文件及样式文件，确保未再引入原Cyan&Orange内置主题文件，避免自定义主题被覆盖。

4. 强制覆盖样式（兜底方案） #

若上述方法无效，可通过更具体的选择器或!important强制应用自定义颜色：

.mat-mini-fab {
  // 使用主题生成的CSS变量
  background-color: var(--mat-primary-color) !important;
  // 或直接调用主题调色板
  // background-color: mat.get-color-from-palette(m3-theme.$primary-palette, 500) !important;
}

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