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

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

您可以通过定义背景色橙类并将其作为类属性更改按钮的颜色只有在正常的CSS方式。

如果您需要将它用作color =“orange”。然后你需要用你需要的颜色创建你自己的主题。请参阅Theming your angular material app关于如何操作。你甚至可以为每个元素定制它。通过customisation您可以根据元素选择不同的主题

但您仍然无法使用它，如color =“orange”，您可以将orange定义为主要或资产颜色，并将其用作color =“primary”或颜色=“资产”根据您的需要。

主题只能有下列项目具有不同颜色

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

Answer 2

使用样式表在在组件级别的引用

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

注：声明在组件级别的样式表的参考。 LIVE DEMO

Answer 3

您可以添加任何颜色像下面

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

它像 '垫成功' 该值生成类，那么该类

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

创建CSS

Answer 4

Thi s的答案是在使用角/ 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> 

第一种情况导致的话“图标名称”五色根据需要，但没有图标。第二种情况导致期望的行为。