为什么当我向按钮添加自定义角度类时，角度材料设计会消失？

Question

我正在尝试向我的按钮添加一个自定义 css 类指令，但每当我这样做时，角度材料设计就会消失，并且按钮会回到其默认的丑陋状态。如何确保我的自定义 css 类被添加到按钮而不删除 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
}

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

Answer 1

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

当你在做[class]="todoItems.completed ? 'delete': null" 时，很难覆盖这些类。

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