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

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

描述
使停止工作

---

使用组件级引用的样式表将其添加为

color=“orange”

？

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

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

---

只有通过为背景色橙色定义一个类并将其用作类属性，才能以常规css方式更改按钮的颜色

如果需要将其用作color=“橙色”。然后你需要用你需要的颜色创建你自己的主题。请参考如何做。您甚至可以对每个元素进行自定义。通过，您可以根据元素选择不同的主题

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

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

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

---

您可以添加以下任何颜色

---

link

这个答案是在angular 5.1.1项目的上下文中使用angular/cli和angular material 5.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>

图标名称

---

第一种情况导致单词“图标名称”按需要着色，但没有图标。第二种情况会导致所需的行为。

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

（添加到全局样式中）

---

可以使用具有背景的类

例如：-

CSS:-

.save-button {
  background: green;
}

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

HTML:-

.save-button {
  background: green;
}

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

拯救

因为当您使用自定义颜色时，模板检查器会给出错误/警告，所以有一种黑客方法。这只适用于真正绝望的人，他们喜欢事情严格，并从IDE得到适当的暗示：）

第一步是创建自己的环境声明。我已经将我的添加到了

polyfills.ts

，因为我有点懒：

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

@ts ignore

是必需的，否则会出现以下错误：

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

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

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

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

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

---

注：显然，当材料决定更改其

CanColor

界面或将其四处移动时，情况会变得越来越糟，但我认为适应此类更改相对容易

简单地说，您不能添加

color=“orange”

。要做到这一点，你必须创建自己的主题。如果你只想分配一个字符串，你不需要绑定：

color=“success”

。是的，这里的目的是你可以分配任何“字符串”值，这些值将生成CSS类，我们可以自定义所需的颜色，就像上面的一样。我分配了字符串“Success”，它生成了matsuccess作为一个类。回答得很好。非常简单，非常有效。非常感谢毗瑟奴黛夫和戈皮坦克！最容易遵循！这太神奇了，我不知道你能做到。非常感谢。