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

Question

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

<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

在组件级别引用样式表

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

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

Answer 2

您只能以正常的 css 方式更改按钮的颜色，方法是为橙色背景定义 class 并将其用作 class 属性。

如果需要作为颜色使用="orange"。然后你需要用你需要的颜色创建你自己的主题。参考Theming your angular material app on how to do it. You can even make it custom for each element. Through customisation可以根据元素选择不同的主题

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

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

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

Answer 3

您可以添加如下任何颜色

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

它生成具有该值的 class，例如 'mat-success'，然后为 class

创建 css

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

Answer 4

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

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

此 class 分配将覆盖垫子图标 class。看来这曾经有效但不再有效：

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

现在你可以换行了：

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

第一种情况导致单词 "icon name" 根据需要着色但没有图标。第二种情况导致了预期的行为。

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

Answer 6

您可以使用带有背景的 class

示例：-

CSS:-

.save-button {
  background: green;
}

HTML:-

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

Answer 7

因为当您使用自定义颜色时模板检查器会给出一个 error/warning，所以有一个绕过它的 hacky 方法。这仅适用于真正绝望的人，他们喜欢严格严格严格，并从 IDE :)

那里得到适当的暗示

第一步是创建您自己的环境声明。我已经将我的添加到 polyfills.ts，因为我有点懒：

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

@ts-ignore是必须的，否则会出现以下错误：

TS2717: Subsequent property declarations must have the same type. Property 'color' must be of type 'ThemePalette', but here has type 'CustomThemePalette'.

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

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

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

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

_{注意：当 material 决定更改其 CanColor 界面或四处移动时，显然事情会以这种方式进行，但我想这会相对容易适应这样的变化}

Answer 8

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

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

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

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

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

Angular material design - how to add custom button color?

material-design

angular-material2

angular