如何在 Angular 中使用自定义 material 调色板？

Question

我在我的页面中使用 material 按钮：

<button mat-stroked-button color="primary">Learn</button>

这种“主要”颜色很有用，但是，我希望能够对我的 material 组件使用不同的调色板。我在我的 .scss 文件中创建了另一个调色板：

$teal: (
  50 : #e5f4f3,
  100 : #bee4e1,
  200 : #93d3cd,
  300 : #67c1b8,
  400 : #47b3a9,
  500 : #26a69a,
  600 : #229e92,
  700 : #1c9588,
  800 : #178b7e,
  900 : #0d7b6c,
  A100 : #adfff3,
  A200 : #7affec,
  A400 : #47ffe4,
  A700 : #2dffe0,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

我正在尝试这样使用它：

<button mat-stroked-button color="teal">Learn</button>

但是，我的 IDE 警告我

teal is not a valid value for color. Expected: primary, accent, or warn

我该怎么办？

Answer 1

Angular Material 主题基于定义您的 primary、warn 和 accent 颜色。 Documentation on Angular Material Theming are very helpful here

您可以在 scss 主文件中定义这些颜色。（下面是copied straight from the docs）

@use '@angular/material' as mat;

@include mat.core();

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

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

@include mat.core-theme($my-theme);

@include mat.button-theme($my-theme);

一旦你定义了你的主题，你就可以根据你的主题使用primary|accent|warn。

如果您不想这样做，那么您需要直接更改按钮的样式，即 background-color

如何在 Angular 中使用自定义 material 调色板？

How to use custom material color palettes in Angular?

angular-material

angular