Почему дизайн углового материала исчезает, когда я добавляю в кнопку пользовательский угловой класс?

Question

Я пытаюсь добавить пользовательскую директиву класса css к моей кнопке, но всякий раз, когда я это делаю, дизайн углового материала исчезает, и кнопка возвращается в свое уродливое состояние по умолчанию. Как я могу убедиться, что мой пользовательский класс CSS добавлен к кнопке, не удаляя эффекты мат-бутона?

<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
}

Я хочу, чтобы мой класс применялся только в том случае, если завершенное свойство имеет значение true, а когда это свойство имеет значение true, кнопка удаления станет красной, когда я наведу на него курсор. Парящая часть работает нормально, но у меня проблема в том, что дизайн материала исчезает и он превращается в стиль кнопки по умолчанию

Answer 1

mat-button применяет свои собственные классы css к <button> во время выполнения.

Когда вы делаете [class]="todoItems.completed ? 'delete': null", эти классы трудно переопределить.

Чтобы добавить свой классдля существующих вы должны использовать ngClass вместо.