Question

我想添加自己的自定义颜色，类似于“主要”，“警告”等。例如，我为橙色背景添加了一个类，但我将它用作类而不是颜色属性。它有效，但代码看起来很混乱。

<button md-raised-button color="primary" class="btn-w-md ml-3 orange-500-bg"><i class="material-icons">description</i> Deactivate</button>

添加color="orange"需要做什么？

Answer 1

您可以添加任何颜色，如下所示

＆＃13;

 <a mat-mini-fab [color]="'success'" routerLink=".">link</a>

＆＃13;

＆＃13; 它会生成具有该值的类，例如“mat-success＆＃39;然后为该类

创建css

＆＃13;

.mat-success {
    background-color: green;
    color: #fff;
}

＆＃13;

Answer 2

您可以通过定义背景颜色橙色的类并将其用作类属性，以正常的css方式更改按钮的颜色。

如果您需要将其用作color =＆＃34; orange＆＃34;。然后你需要用你需要的颜色创建自己的主题。请参阅Theming your angular material app了解如何操作。您甚至可以为每个元素进行自定义。通过customisation，您可以根据元素选择不同的主题

但是你仍然无法像color =＆＃34; orange＆＃34;那样使用它，你可以将橙色定义为主要颜色或资产颜色，并将其用作color =＆＃34; primary＆＃34;或者颜色=＆＃34;资产＆＃34;根据您的需要。

主题只能包含以下不同颜色的项目

主要调色板：所有屏幕和组件中使用最广泛的颜色。
重音调色板：用于浮动操作按钮和交互元素的颜色。
警告调色板：用于传达错误状态的颜色。
前景调色板：文字和图标的颜色。
背景调色板：用于元素背景的颜色。

Answer 3

这个答案是在使用角度/ cli和角度材料5.1的角度5.1.1项目的背景下。

mat -...似乎从父母那里继承了它的颜色，所以如果用一个span或div包围并在那里应用颜色它应该通过。在我的特定用例中，我们想要动态设置图标的颜色。我们的初步实施和新实施如下。

此类分配将覆盖mat-icon类。似乎这种用法起作用但不再适用：

<mat-icon [class]="custom-class">icon name</mat-icon>

现在你可以换行：

<span [class]="custom-class"><mat-icon>icon name</mat-icon></span>

第一种情况导致“图标名称”字样按要求着色但没有图标。第二种情况导致了期望的行为。

Answer 4

我为所有按键按钮类型创建了样式

STACKBLITZ DEMO

（添加到您的全局样式）

.mat-button.mat-success,
.mat-stroked-button.mat-success {
    color: #155724;
}
.mat-button.mat-success:hover,
.mat-stroked-button.mat-success:hover {
  background-color: #f0fff3;
}

.mat-raised-button.mat-success,
.mat-flat-button.mat-success,
.mat-fab.mat-success,
.mat-mini-fab.mat-success {
  color: #f0fff3;
  background-color: #155724;
}

.mat-icon-button.mat-success {
  color:#155724;
}

Answer 5

在组件级别引用的样式表

.mat-button, .mat-raised-button{
    background-color:red;
}

注意：在组件级别声明样式表引用。的 LIVE DEMO

Answer 6

您可以使用具有背景的课程

示例：-

CSS：-

.save-button {
  background: green;
}

HTML：-

<button mat-mini-fab class="save-button" >
       <mat-icon >save</mat-icon>
</button>

Answer 7

因为模板检查器在您使用自定义颜色时会给出错误/警告，所以有一种解决方法。这仅适用于真正的绝望的人，他们喜欢严格严格的严格并从 IDE 中得到适当的提示:)

第一步是创建您自己的环境声明。我已将我的添加到 polyfills.ts，因为我有点懒：

declare module '@angular/material/core/common-behaviors/color' {
  interface CanColor {
    // @ts-ignore
    color: CustomThemePalette;
  }
}

@ts-ignore 是必须的，否则会出现以下错误：

<块引用>

TS2717：后续的属性声明必须具有相同的类型。属性“color”的类型必须为“ThemePalette”，但此处的类型为“CustomThemePalette”。

然后您可以定义您的自定义主题调色板：

import type { ThemePalette } from '@angular/material/core/common-behaviors/color';

export type CustomThemePalette = ThemePalette | 'secondary' | 'success' | 'alert';

现在您终于可以在模板中使用这些自定义颜色了，您的 IDE 会提示它们并在您输入错误时通知您。胜利！

_{注意：很明显，当材料决定改变它们的 CanColor 界面或移动它时，事情会朝着这个方向发展，但我认为适应这种变化会相对容易}

角材料设计 - 添加自定义按钮颜色

7 个答案: