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

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

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

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

它生成具有该值的类,如'mat-success',然后为该类创建css

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

Answer 2

我已经为所有 mat-button 类型创建了样式

STACKBLITZ 演示

（添加到您的全局样式）

.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 3

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

如果你需要将它用作color ="orange".然后你需要用你需要的颜色创建自己的主题.请参阅主题您的角度材料应用程序如何做到这一点.您甚至可以为每个元素进行自定义.通过自定义,您可以根据元素选择不同的主题

但是你仍然无法像color ="orange"那样使用它,你可以将橙色定义为主要颜色或资产颜色,并根据需要将其用作color ="primary"或color ="asset".

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

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