Angular 11升级至12后，通过Mixins自定义Angular Material组件主题失效问题求助

看起来你在升级到Angular Material 12时踩了主题系统变更的坑——Material 12对Sass主题架构做了不少重构，尤其是模块化和私有API的限制，这直接导致你原来的Angular 11写法失效了。我来帮你梳理问题并给出修复方案：

核心问题分析 #

你当前的代码有几个关键问题：

• 滥用私有API：你直接引用了private.private-theme-elevation这类私有模块，Angular Material的私有API（带private-前缀的）不对外承诺兼容性，升级后路径或实现逻辑很可能变化，这会导致样式无法正确编译。
• 主题集成方式错误：Angular Material 12的组件主题需要通过官方的主题构建流程来加载，你自定义的theme mixin没有被正确关联到全局主题中，导致Material依然使用默认的slide-toggle-theme覆盖你的样式。
• 导入冗余且混乱：你导入了一堆内部模块，其实只需要通过@use '@angular/material' as mat;就能访问所有公开的主题工具方法。

修正后的实现代码 #

1. 自定义Slide Toggle主题Mixin（slide-toggle-theme.scss） #

@use '@angular/material' as mat;

// 自定义颜色样式
@mixin color($config) {
  $is-dark: mat.get-color-config($config, is-dark);
  $foreground: mat.get-color-config($config, foreground);

  $thumb-unchecked-hue: if($is-dark, 400, 50);

  .mat-slide-toggle-thumb {
    // 使用公开的elevation mixin替代私有API
    @include mat.theme-elevation(1, $config);
    background-color: red !important;
  }

  // 你原来的_checked-color逻辑也可以保留，用公开API实现
  &.mat-checked .mat-slide-toggle-thumb {
    background-color: mat.get-color-from-palette(mat.get-color-config($config, primary), default) !important;
  }
}

// 自定义排版样式（如果需要）
@mixin typography($config) {
  .mat-slide-toggle-content {
    font-family: mat.font-family($config);
  }
}

// 整合主题Mixin，遵循Material的结构
@mixin theme($theme) {
  $color-config: mat.get-color-config($theme);
  $typography-config: mat.get-typography-config($theme);

  @if $color-config != null {
    @include color($color-config);
  }
  @if $typography-config != null {
    @include typography($typography-config);
  }
}

2. 在全局主题文件中应用自定义Mixin #

在你的主主题文件（比如theme.scss）中，需要在Material默认组件主题之前或替代默认主题来加载你的自定义样式：

方式一：替代默认的Slide Toggle主题

@use '@angular/material' as mat;
@use './path-to-your-slide-toggle-theme' as custom-slide-toggle;

// 定义你的主题
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette);
$warn: mat.define-palette(mat.$red-palette);
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));

// 先应用Material的基础主题
@include mat.core();

// 应用所有其他组件的默认主题，排除slide-toggle
@include mat.all-component-themes($theme) without (slide-toggle);

// 应用你的自定义slide-toggle主题
@include custom-slide-toggle.theme($theme);

方式二：直接覆盖（如果只需要局部修改）

如果你只是想在默认主题基础上修改少量样式，也可以简化流程：

@use '@angular/material' as mat;

// 定义并应用默认主题
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette);
$warn: mat.define-palette(mat.$red-palette);
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  ),
));

@include mat.core();
@include mat.all-component-themes($theme);

// 直接添加自定义样式，利用CSS优先级覆盖
.mat-slide-toggle-thumb {
  @include mat.theme-elevation(1, $theme);
  background-color: red !important;
}

关键注意事项 #

• 避免私有API：所有带private-前缀的模块或方法都不要直接使用，改用mat.theme-elevation、mat.get-color-config这类公开API。
• 主题加载顺序：自定义样式必须在Material默认主题之后加载（或者通过without排除默认组件主题后加载自定义的），否则会被默认样式覆盖。
• @use的路径问题：Angular 12+推荐使用相对于项目根目录的路径，或者直接@use '@angular/material'，不再需要~前缀（如果你的构建工具支持的话）。

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