Question

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

Answer 1

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

将Angular Material的主题包含在应用的SCSS文件的顶层。
```
@import '~@angular/material/theming';
```
包括mat-core mixin。
```
@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。

是否可以在Angular Material Design中使用主题按钮样式

1 个答案: