从 angular 11 升级到 12 后，通过 mixin 为组件设置主题似乎不再有效

Question

我正在尝试将我的自定义主题从 Angular Material 11 更新到 12。我的问题是当我想包含我的 mixin 时，它们不再被导入。

下面是我的代码的一个非常简单的版本：

我的 angular 11 代码（在升级到 angular 12 之前有效）

@use '~@angular/material' as mat;
@mixin mat-slide-toggle-theme($theme) {
  $is-dark: map_get($theme, is-dark);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

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

  $bar-unchecked-color: mat.get-color-from-palette($foreground, disabled);
  $ripple-unchecked-color: mat.get-color-from-palette($foreground, base);

  .mat-slide-toggle-thumb {
    @include _mat-theme-elevation(1, $theme);
    background-color: red; // For example
  }

}

@include mat.slide-toggle-theme($nest-theme);

期望 mat-slide-toggle-thumb 的背景颜色等于红色

结果 mat-slide-toggle-thumb 的背景色等于红色

我的 sass 代码 angular 12

@use '~@angular/material' as mat;
@use 'sass:map';
@use '~@angular/material/core/style/private';
@use '~@angular/material/core/theming/palette';
@use '~@angular/material/core/theming/theming';
@use '~@angular/material/core/typography/typography';
@use '~@angular/material/core/typography/typography-utils';

@mixin _checked-color($palette, $thumb-checked-hue) {
  &.mat-checked {
    .mat-slide-toggle-thumb {
      background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);
      background-color: red !important;;
    }
  }
}

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $is-dark: map.get($config, is-dark);
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);
  $warn: map.get($config, warn);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);

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

  $bar-unchecked-color: theming.get-color-from-palette($foreground, disabled);
  $ripple-unchecked-color: theming.get-color-from-palette($foreground, base);

  .mat-slide-toggle-thumb {
    @include private.private-theme-elevation(1, $config);
    background-color: red !important; // FOR EXAMPLE
  }

}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2014-config(
      theming.get-typography-config($config-or-theme));
  .mat-slide-toggle-content {
    font-family: typography-utils.font-family($config);
  }
}

@mixin _density($config-or-theme) {}

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography: theming.get-typography-config($theme);

    @if $color != null {
      @include color($color);
    }
    @if $density != null {
      @include _density($density);
    }
    @if $typography != null {
      @include typography($typography);
    }
  }

  // I tried here it too with no success
  .mat-slide-toggle-thumb {
    @include _mat-theme-elevation(1, $theme);
    background-color: red !important;
  }

}

// the include below doesn't seems to work even if i change @mixin theme to @mixin slide-toggle-theme
// @include mat.slide-toggle-theme($nest-theme);

期望 mat-slide-toggle-thumb 的背景颜色等于红色

结果 mat-slide-toggle-thumb 的背景颜色不等于红色

我也尝试过使用 @use 和 @forward 但没有成功，似乎该项目只编译和使用 [=54 中的一个（slide-toggle-theme） =] 而不是我的

@forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show slide-toggle-theme, 滑动切换颜色、滑动切换排版；

你能告诉我我做错了什么吗？

Answer 1

好的，我发现了我的错误：

在我的自定义主题中，我需要导入并包含自定义幻灯片切换主题：

@use './components/slide-toggle/_slide-toggle-theme' as slide-toggle-theme;
// all the theming configuration
$my-primary: mat.define-palette($mat-custom);
$my-accent:  mat.define-palette($mat-accent, A200, A100, A400);
$my-warn:    mat.define-palette(mat.$red-palette);
// Create the theme object
$my-theme: mat.define-light-theme($my-primary, $my-accent, $my-warn);

// including Nest theme
@include mat.all-component-themes($my-theme);
@include slide-toggle-theme.theme($my-theme);

文档：https://material.angular.io/guide/theming-your-components

Answer 2

我使用这个新语法解决了这个问题 (mat.all-component-theme) 看看

@use "~@angular/material"as mat;
@import "~angular-material-css-vars/main";

@include init-material-css-vars(); // so i can use other color palette
@include mat-css-set-palette-defaults($mat-blue-grey, 'primary');

$theme-primary: mat-palette($mat-blue-grey);
$theme-accent: mat-palette($mat-yellow);
$theme-warn: mat-palette($mat-red);

$theme: mat.define-light-theme((color: (primary: $theme-primary, accent: $theme-accent, warn: $theme-warn)));

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

从 angular 11 升级到 12 后，通过 mixin 为组件设置主题似乎不再有效

Theming the components through mixins doesn't seem to work anymore after upgrading from angular 11 to 12

javascript

sass

angular-material

angular

angular12