Angular Material Design中的主題按鈕樣式是否可能

Question

眾所周知，在Angular Material Design中，您可以自定義主題，甚至可以創建多個主題，並且只需單擊一次即可更改它們，至少可以更改顏色。 但是是否也可以更改包含html和css中元素樣式的主題？ 因此，例如，我持有2個不同的主題，在主題A中，按鈕應為綠色圓角，而在主題B中，按鈕應為藍色圓角。 因此，您只需單擊一下即可在這些內容之間切換，然后網站將應用它？

Answer 1

看起來您將要創建一個自定義主題。 請遵循以下指示：

1. 在應用程序的SCSS文件的頂級中包含Angular Material的主題。

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

2. 包括mat-core混合。

    @include mat-core(); 

3. 添加一些調色板：（請參閱此處以獲取調色板的完整列表）

    $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. 然后，您可以使用屬性binding和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; } 

---

考慮查看有關“角材料”的主題指南 。