为什么我的定制颜色不适用于我的角度材质主题？

Question

我试图为我的角度材质主题添加更多的颜色，我已经通过映射在我的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>

我现在用的是“@角质/材料”："^13.2.4"，

Answer 1

我认为只缺少了一个步骤:添加.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演示链接 (不幸的是，Stacklitz在自定义主题上有问题)

Answer 2

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

根据官方的文档 -

如果您使用的是角CLI，则支持将Sass编译为CSS；您只需将一个新条目添加到角-cli.json中指向主题文件的“样式”列表中(例如，定制主题.Sass)。

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

如果您没有使用角-CLI：

根据官方的文档 -

如果不使用角CLI，则可以通过index.html中的一个元素包含预构建的主题。

所以首先要确保所有的进口都是正确的。

如果两者都不起作用：

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

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

请记住，当您添加该导入时，IDE将告诉您它不需要，并且可以删除。

即使这样也没什么用

根据最新的角度材料文档，您必须从其各自的包中导入模块，而不是从@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';

最后手段

尝试使用您构建的相同主题构建一个应用程序的最小复制，并在这里发布它，或者自己尝试调试它(您会惊讶于它有多大的帮助)

在任何情况下，如果没有发生任何更改，则运行ng-serve