Angular 16: Как изменить цвет фона каждой второй строки в таблице матов и цвет фона строки при наведении курсора мыши?

Question

Недавно я обновил свой проект с Angular 13 до Angular 16. Сообщение о том, что обходной путь CSS, который я использовал для цвета строки мата при наведении и альтернативного цвета строки, не работает. Я нашел так много ссылок в самом переполнении стека, но ничего не помогло.

Попробовал добавить CSS в конкретный компонент и файл style.scss. но не повезло.

      .mat-row:nth-child(odd) {
  background-color: #FFFFFF;
}
.mat-row:nth-child(even) {
  background-color: #F8F8F8;
}
.tr.mat-row:hover{
  background-color: #87CEEB !important;
}

может кто-нибудь помочь мне решить эту проблему.

Answer 1

В Angular v16 классы были изменены с.mat-rowк.mat-mdc-row.

Просто добавьте следующий CSS вstyles.scss:

      .mat-mdc-row:nth-child(odd) {
  background-color: #FFFFFF;
}

.mat-mdc-row:nth-child(even) {
  background-color: #F8F8F8;
}

.mat-mdc-row:hover{
  background-color: #87CEEB !important;
}

Посмотрите живую демонстрацию.