css - 是否可以在 Angular Material Design 中设置按钮样式的主题

Question

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

Answer 1

看起来您需要创建一个自定义主题。请按照以下说明操作:

1. 在应用的 SCSS 文件的顶层包含 Angular Material 的主题。

   @import '~@angular/material/theming';
   

2. 包含 mat-core 混合宏。

   @include mat-core();
   

3. 添加一些调色板:(有关调色板的完整列表，请参阅 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);
   

4. 将主题纳入个人主题。

   注意:您还可以使用类在颜色主题之间切换。

   .my-app-theme {
     @include mat-button-theme($my-app-theme);
   }
   

5. 然后您可以使用属性绑定(bind)和 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;
   }
   

---

考虑查看 Theming guide关于 Angular Material 。