Angular material design - 如何添加自定义按钮颜色？

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"

？

Answer 1

您可以添加如下任何颜色

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

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

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

Answer 2

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

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"。然后你需要用你需要的颜色创建你自己的主题。请参阅Theming your angular material app了解如何操作。您甚至可以为每个元素定制它。通过定制您可以根据元素选择不同的主题

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

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

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

Answer 4

This answer is in the context of an angular 5.1.1 project using angular/cli and angular material 5.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>

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

Answer 5

你可以使用有背景的课程

例子：-

CSS：-

.save-button {
  background: green;
}

HTML：-

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

Answer 6

在组件级别引用样式表

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

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

Answer 7

因为模板检查器在您使用自定义颜色时会给出错误/警告，所以有一个 hacky 方法可以解决它。这仅适用于真正绝望的人，他们喜欢严格严格严格并从 IDE 获得适当的提示:)

第一步是创建您自己的环境声明。我加了我的

polyfills.ts

，因为我有点懒：

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

@ts-ignore

是必须的，否则会报如下错误：

TS2717：后续的属性声明必须具有相同的类型。属性“颜色”必须是“ThemePalette”类型，但这里的类型是“CustomThemePalette”。

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

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

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

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

_{注意：当材料决定更改其}

CanColor

界面或四处移动时，显然事情会以这种方式向南发展，但我想适应这种变化会相对容易

Answer 8

对于扁平和凸起的按钮，一个简单的 CSS 应该像 here.

提到的那样工作

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

我创建了一个 stackblitz 来展示相同的案例。

如果您想要更简单的设置，更好的方法是创建另一个主题变体。例如，您可以创建一个主题

$custom-theme

并将其应用到

.custom-theme

类下。我还创建了 stackblitz 来展示相同的内容。

Answer 9

对于当前的角度材料 v15，请查看此答案以使用混合变体设置自定义主题角度材料自定义颜色

Answer 10

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

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

或

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