为什么在我向按钮添加自定义 angular class 时 angular material 设计消失了？

Question

我正在尝试向我的按钮添加自定义 css class 指令，但每当我这样做时，angular material 设计就会消失并且按钮会恢复为默认值丑陋的状态。我怎样才能确保我的自定义 css class 被添加到按钮而不删除 mat-button 效果？

<button 
  mat-button
  [class]="todoItems.completed ? 'delete': null"
  (click)="deleteTodo(todoItems._id)" 
  [disabled]="!todoItems.completed">
          <mat-icon >delete</mat-icon>
</button>

这是css

.delete:hover {
   color: red
}

我希望我的 class 仅在完成的属性为真时应用，当属性为真时，当我将鼠标悬停在删除按钮上时，删除按钮将变为红色。悬停部分工作正常但我遇到的问题是 material 设计消失了，它变成了按钮的默认样式

Answer 1

mat-button 在运行时将自己的 css classes 应用于 <button>。

当您执行 [class]="todoItems.completed ? 'delete': null" 时，很难覆盖这些 classes。

要将您的 class 附加到现有的，您需要改用 ngClass。

为什么在我向按钮添加自定义 angular class 时 angular material 设计消失了？

Why does the angular material design disappear when I add a custom angular class to a button?

css

responsive-design

angular-material

angular