Angular Material v15 主題如何從 v14 工作

Question

您好，通過 angular 材料的新更新，他們改變了主題的工作方式。 我遵循了 Angular Material 網站上的教程並添加了一個托盤定義我的主要/強調顏色並應用它：

$lightBlue-palette: (
  50:  #f1f7f7,
  100: #d4f0f8,
  200: #a4e3f0,
  300: #6dc7da,
  400: #08badd,
  500: #2687a2,
  600: #216e88,
  700: #1d536a,
  800: #16384d,
  900: #0e2335,
  contrast: (
  50: rgba(black, 0.87),
  100: rgba(black, 0.87),
  200: rgba(black, 0.87),
  300: white,
  400: white,
  500: white,
  600: white,
  700: white,
  800: white,
  900: white,
  )
);

$my-primary: mat.define-palette($lightBlue-palette, 400);
$my-accent: mat.define-palette($lightBlue-palette, 900);

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


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

就像文檔中所說的那樣。 但后來我得到這個錯誤：

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
  ╷
9 │   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
  │                                    ^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@angular/material/button/_button-theme-private.scss 9:36    -ripple-color()
  node_modules/@angular/material/button/_button-theme-private.scss 43:5    ripple-theme-styles()
  node_modules/@angular/material/button/_button-theme.scss 177:7           @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5  @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3  using-mdc-theme()
  node_modules/@angular/material/button/_button-theme.scss 43:3            color()
  node_modules/@angular/material/button/_button-theme.scss 216:7           @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3          private-check-duplicate-theme-styles()
  node_modules/@angular/material/button/_button-theme.scss 210:3           theme()
  src/custom-theme.scss 55:1                                               root stylesheet

我知道更新是全新的，但我不知道他們想從我這里得到什么，而且錯誤也確實幫助了我。

我試着按照Angular Material中的文檔

Answer 1

檢查您加載材料組件的位置（它可以放在 app.module.ts 或其他文件中）您沒有這些組件的舊版本。 通常標記為從 angular 材料進口，但帶有 legacy 前綴。 import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy/card';