是否可以在 Angular Material Design 中为按钮样式设置主题答案

【问题标题】：Is it possible to theme button style in Angular Material Design是否可以在 Angular Material Design 中为按钮样式设置主题
【发布时间】：2018-10-19 16:05:37
【问题描述】：

众所周知，在 Angular Material Design 中，您可以自定义主题，甚至可以创建多个主题并一键更改它们，至少可以更改颜色。但是是否也可以更改主题，包括 html 和 css 中元素的样式？因此，例如，我持有 2 个不同的主题，在主题 A 中，按钮应该是圆角绿色，而在主题 B 中，按钮应该是角蓝色。因此，您可以一键在这些之间切换，网站将应用它？

【问题讨论】：

重复：stackoverflow.com/questions/25568801/…
@Sirence 我说的是 Angular 材料。
您是否阅读了链接帖子中的第一个答案？ “我认为这不是 AngularJS 的问题。我认为您的方法应该有所不同。据我所知，主题功能通常如下实现。...”这普遍适用。
Chinedu(Nwokem)，你是通过调整 CSS 使其成为材料设计的人。 Angular 只是为你做切换。
看起来 OP 要求的是 Angular，不是 AngularJS。

标签： css material-design angular-material

【解决方案1】：

您似乎想要创建一个自定义主题。请遵循以下说明：

在应用的 SCSS 文件的顶层包含 Angular Material 的主题。
```
@import '~@angular/material/theming';
```
包括 mat-core 混合。
```
@include mat-core();
```

添加一些调色板：（有关调色板的完整列表，请参阅here）

$my-app-primary: mat-palette($mat-deeppurple);
$my-app-accent: mat-palette($mat-amber, A200, A100, A400);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

将主题包含在单个主题中。

注意：您还可以使用类在颜色主题之间切换。
```
.my-app-theme {
  @include mat-button-theme($my-app-theme);
}
```

然后您可以使用属性绑定和ngClass 来引用它。 (ngClass, [class.className])

<button mat-button [ngClass]="{'my-app-theme': isToggled, 'another-app-theme': !isToggled}" (click)="toggleState()" color="primary">Toggle theme</button>

isToggled: boolean;

toggleState() {
  this.isToggled = !this.isToggled;
}

考虑查看 Angular Material 上的 Theming guide。

【讨论】：