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

Question

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

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

- Shaniqwa

---

简单来说，你不能添加 color="orange"。你必须创建自己的主题才能实现这一点。 - user4676340

Answer 1

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

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

it generates the class with that value like 'mat-success' then create css for that class

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

- Gopi

---

如果你只是想分配一个字符串，那么你不需要绑定：color="success"。 - Lars

是的，这里的目的是您可以分配任何“字符串”值，它将生成为CSS类，通过这样我们可以自定义所需的颜色，就像上面的例子。我已经分配了字符串“Success”，它生成了mat-success作为一个类。 - Gopi

这是正确的答案。 - Sachith Rukshan

这似乎在Material v15中不再起作用。 - brt

对于 Angular 15，我不得不添加 !important。 - Luca Carlon

Answer 2

对于版本16，请使用STACKBLITZ。 （感谢Lucas Tesseron）

---

我已经为所有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;
}

- Andre Elrico

---

这太神奇了，我不知道你可以做到这一点。谢谢你。 - 1252748

我的天啊。你只需要使用mat-{custom-name}就可以完美地工作了。这样，如果你不想受到限制的话。 - BAcevedo

现在类别已更改为mdc-button、mat-mdc-button-raised等，供您参考。 - Igor Kurkov

这是@angular/material 16.0.0的更新版本 https://stackblitz.com/edit/oyd9fg?file=src/styles.scss - Lucas Tesseron

我不知道为什么在我的Angular 16中，我无法应用那些创建的颜色。我只能通过使用.mat-mdc-raised-button:not(:disabled)选择器，并将颜色重要性赋值来覆盖原始颜色。 - Woden

经过几次尝试，我仍然需要使用!important来覆盖原始颜色与提供的代码。 - Woden

Answer 3

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

如果需要使用color="orange"，那么您需要创建自己的主题，并使用您需要的颜色。请参考Theming your angular material app了解如何操作。您甚至可以为每个元素进行自定义。通过customisation，您可以根据元素选择不同的主题。

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

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

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

- Kowsalya

Answer 4

这个答案是关于使用angular/cli和angular material 5.1的angular 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>

第一种情况导致“图标名称”按预期着色，但未出现图标。第二种情况导致所需行为。

- Matthew Bowers

Answer 5

由于模板检查器在使用自定义颜色时会出现错误/警告，因此有一种hacky的方法可以绕过它。这仅适用于那些喜欢事情非常严格严格严格并且希望从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会提示并在你输错时通知你。胜利！

_{注意：显然，当Material决定更改他们的CanColor接口或将其移动时，事情会变得困难，但我想适应这些变化相对容易。}

- Poul Kruijt

---

你，我的朋友，用这个提示让我非常开心。 :) - Joe Firebaugh

Answer 6

你可以使用带有背景的类

例如：

CSS：

.save-button {
  background: green;
}

HTML：

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

- user8211804

Answer 7

在组件级别引用样式表

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

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

- Aravind

Answer 8

适用于 Angular 15 的类似解决方案：

.mat-mdc.mat-mdc-button.mat-orange { color: orange; }

或者

.mat-mdc-button.mat-orange:not(:disabled) { color: orange; }

- Oktagram b.

---

请记住，这个解决方案有效是因为CSS是级联的。因此，为了覆盖默认提供的样式，您必须在样式上具有更大的“权重”。这就是为什么这个解决方案有效，添加更多的类在您创建的自定义类之前增加了您想要强制执行的样式的“权重”，从而使其比默认样式更“重要”。 - Ivanp

Answer 9

对于平面和凸起按钮，一个简单的CSS应该可以像这里提到的那样工作。

但是，为了处理所有变体（轮廓、简单等）和所有状态（悬停、焦点、禁用等），需要更复杂的设置。

我创建了一个stackblitz来展示相同的内容。

如果您想要更简单的设置，更好的方法是创建另一个主题变量。例如，您可以创建一个主题$custom-theme并将其应用在.custom-theme类下。我还创建了一个stackblitz来展示相同的内容。

- shhdharmen

Answer 10

针对当前的 Angular Material v15，请参考以下答案设置自定义主题和混合变体 Angular Material 自定义颜色

- Igor Kurkov