角材料设计 - 如何添加自定义按钮颜色？答案

【问题标题】：Angular material design - how to add custom button color?角材料设计 - 如何添加自定义按钮颜色？
【发布时间】：2017-12-21 23:28:45
【问题描述】：

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

<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"？

【问题讨论】：

简单来说，不能加color="orange"。您必须制作自己的主题才能做到这一点。

标签： angular material-design angular-material2

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您只能以普通的 css 方式更改按钮的颜色，方法是为背景颜色橙色定义一个类并将其用作类属性。

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

但是您仍然不能像 color="orange" 一样使用它，您可以将橙色定义为您的主色或强调色，并根据您的需要将其用作 color="primary" 或 color="accent"。

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

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

【讨论】：

【解决方案3】：

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

 &lt;a mat-mini-fab color="success" routerLink="."&gt;link&lt;/a&gt;

它生成具有该值的类，例如“mat-success”，然后为该类创建 css

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

【讨论】：

如果只想赋值字符串，不需要绑定：color="success".
是的，这里的目的是您可以分配任何“字符串”值，这些值将生成为 CSS 类，我们可以自定义所需的颜色，就像上面的一样。我已经分配了字符串“Success”，它生成了 mat-success 作为一个类。
优秀的答案。非常简单而且非常有效。谢谢 Vishnudev 和 Gopi
非常感谢！最容易上手！
哇。这非常有帮助！

【解决方案4】：

此答案是在使用 angular/cli 和 angular material 5.1 的 angular 5.1.1 项目的上下文中。

垫子-... 似乎从父级继承了它的颜色，所以如果你用 span 或 div 包围并在那里应用颜色，它应该会落下。在我的特定用例中，我们希望动态设置图标的颜色。我们的初始实施和新实施如下。

这个类分配将覆盖 mat-icon 类。似乎这种用法可以工作，但不再有效：

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

现在你可以换行了：

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

第一种情况导致“图标名称”字样根据需要着色但没有图标。第二种情况会导致所需的行为。

【讨论】：

【解决方案5】：

我已经为所有垫子按钮类型创建了样式

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;
}

【讨论】：

这太棒了，我不知道你能做到这一点。谢谢。

【解决方案6】：

你可以使用有背景的类

例子：-

CSS：-

.save-button {
  background: green;
}

HTML：-

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

【讨论】：

【解决方案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界面或移动它时，但我想适应这样的变化会相对容易}

【讨论】：