为什么我的自定义颜色在我的 Angular material 主题中不起作用？

Question

我试图为我的 angular material 主题添加更多颜色，我已经通过 map.deep-merge 函数

在我的 style.scss 中添加了成功颜色

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as material;
@use "sass:map";

@include material.core();

$custom-primary: material.define-palette(material.$light-blue-palette);
$custom-accent: material.define-palette(material.$blue-palette, A200, A100, A400);
$custom-warn: material.define-palette(material.$red-palette);
// extra Colors
$custom-success: material.define-palette(material.$green-palette);
$custom-danger: material.define-palette(material.$orange-palette);



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


$custom-theme: map.deep-merge(
  $custom-theme,(
    success: $custom-success,
    danger: $custom-danger,
    color:(
      success: $custom-success,
      danger: $custom-danger
    )
  )
    );

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

一切都可以正确编译，但是当我尝试将颜色应用于按钮时，它看起来像这样

不知道为什么。

<button mat-raised-button color="success">Success</button>
<button mat-raised-button color="danger">Danger</button>

目前我正在使用 "@angular/material": "^13.2.4",

Answer 1

如果您在构建项目时使用了 angular-CLI：

根据官方docs-

If you are using the Angular CLI, support for compiling Sass to CSS is built-in; you only have to add a new entry to the "styles" list in angular-cli.json pointing to the theme file (e.g., custom-theme.scss).

因此请确保您的主题包含在您的 angular.json 中并且必要的导入存在于 app.module.ts 中，现在您可以像这样在每个文件中导入您的主题：@import YOUR_FILE_NAME编辑 angular.json 文件后，您需要再次运行 ng-serve。

如果您不使用 angular-CLI:

根据官方docs-

If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.

所以首先确保所有导入都是正确的

如果两者都没有帮助：

在每个使用 mat* 组件的组件文件中添加另一个导入

import { MatButtonModule } from "@angular/material/button";

请记住，当您添加该导入时，您的 IDE 会告诉您（通过将其灰显）它不需要并且可以删除。

如果这也没有帮助

根据最新的 angular material 文档，您必须从其各自的包中导入模块而不是 @angular/material/

因此更改为：

import { MatToolbarModule , MatButtonModule, MatIconModule} from '@angular/material';

至：

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

不得已

尝试使用您构建的相同主题构建一个应用程序的最小复制品并 post 在这里或尝试自己调试它（您会惊讶于它的帮助）

并且在任何情况下每次更改后，如果没有任何反应，运行 ng-serve

Answer 2

我认为只缺少一步：添加 .mat-success 和 .mat-danger CSS 类:

.mat-success {
  background-color: material.get-color-from-palette($custom-success, 500);
  color: material.get-color-from-palette($custom-success, 500-contrast);
}

.mat-danger {
  background-color: material.get-color-from-palette($custom-danger, 500);
  color: material.get-color-from-palette($custom-danger, 500-contrast);
}

我还删除了在此解决方案中不需要的 map.deep-merge。

完成 theme.scss 文件：

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use "@angular/material" as material;

@include material.core();

$app-primary: material.define-palette(material.$purple-palette);
$app-accent: material.define-palette(material.$teal-palette, A200);
$app-warn: material.define-palette(material.$red-palette);
// extra Colors
$custom-success: material.define-palette(material.$green-palette);
$custom-danger: material.define-palette(material.$orange-palette);

$custom-theme: material.define-light-theme(
  (
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    ),
  )
);

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

.mat-success {
  background-color: material.get-color-from-palette($custom-success, 500);
  color: material.get-color-from-palette($custom-success, 500-contrast);
}

.mat-danger {
  background-color: material.get-color-from-palette($custom-danger, 500);
  color: material.get-color-from-palette($custom-danger, 500-contrast);
}

Github Demo Link（不幸的是 Stacklitz 的自定义主题有问题）

为什么我的自定义颜色在我的 Angular material 主题中不起作用？

Why My custom colors are not working in my Angular material theme?

css

angular

sass

angular-material

angular-material-theming

如果您在构建项目时使用了 angular-CLI：

如果您不使用 angular-CLI:

如果两者都没有帮助：

如果这也没有帮助

不得已