时间戳

首页 > 解决方案 > 从 angular 11 升级到 12 后，通过 mixins 对组件进行主题化似乎不再起作用

javascript - 从 angular 11 升级到 12 后，通过 mixins 对组件进行主题化似乎不再起作用

问题描述

我正在尝试将我的自定义主题从 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 的背景色等于红色

我的角度为 12 的 sass 代码

@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似乎该项目只编译和使用材料中的一个（幻灯片切换主题）而不是我的

@forward './slide-toggle/slide-toggle-theme' as slide-toggle-* 显示幻灯片切换主题、幻灯片切换颜色、幻灯片切换排版；

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

标签： javascriptangularsassangular-materialangular12

解决方案

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

在我的自定义主题中，我需要导入并包含自定义 slide-toggle-theme ：

@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

推荐阅读