角度从 13 更新到 16 后主色默认值

Question

我将我的角度（+material-ui）系统从 13 更新到 16。我有一个问题：我的自定义主题的主色值不再起作用。现在使用默认值蓝色。 我添加了“@use“@angular/material”作为垫子；”以及排版和密度的值，因为在更新角度版本后我收到了一些构建警告。

这是我的自定义主题：

    @use "@angular/material" as mat;
    @import "@angular/material/theming";
    @include mat-core();
    
    $my-orange: (
  50: #80ba24,
  100: #80ba24,
  200: #80ba24,
  300: #80ba24,
  400: #80ba24,
  500: #80ba24,
  600: #80ba24,
  700: #80ba24,
  800: #80ba24,
  900: #80ba24,
  A100: #80ba24,
  A200: #80ba24,
  A400: #80ba24,
  A700: #80ba24,
  contrast: (
    50: white,
    100: white,
    200: white,
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  ),
);
    
    $my-custom-primary: mat-palette($my-orange);
    $my-custom-accent: mat-palette($mat-gray, 100, 500, A100);
    $my-custom-warn: mat-palette($mat-red);
    
    $ioo-text-color: #525252;
    //$ioo-text-color-light: #686868;
    $ioo-text-color-light: #7f7f7f;
    $ioo-text-color-accent: #80ba24;
    $ioo-icon-color: #3a3a3a;
    $ioo-icon-color-light: #959595;
    $ioo-dividier: #dcdcdc;
    
    $my-theme: mat-light-theme(
      (
        color: (
          primary: $my-custom-primary,
          accent: $my-custom-accent,
          warn: $my-custom-warn,
        ),
        typography: mat.define-typography-config(),
        density: 0,
      )
    );

我在 styles.scss 中导入自定义：

@use "@angular/material" as mat;

@include mat.core();

$backend-primary: mat.define-palette(mat.$indigo-palette);
$backend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$backend-warn: mat.define-palette(mat.$red-palette);
$backend-theme: mat.define-light-theme(
  (
    color: (
      primary: $backend-primary,
      accent: $backend-accent,
      warn: $backend-warn,
    ),
  )
);
@import "custom-theme";

但是当我尝试在组件中使用原色的值时，它只是蓝色：

<button mat-raised-button color="primary" (click)="onSave()">
Save </button>

我手动更新了所有旧组件导入。

Answer 1

我注意到一些错误：

1. 根据

   Angular Material

   ，您不得多次使用@include mat.core()。
2. 根据

   Sass

   ，不鼓励使用 @import。请使用

   @use

   来代替。
3. 您从未执行过

   all-component-themes

   mixin 将自定义主题应用到所有组件。

---

_自定义主题.scss

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$pink-palette, 500);
$my-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

@function theme() {
  @return $my_theme;
}

样式.scss

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

@include mat.core();

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