как поменять на угловой материал 2 цвета фона мат-карты в двух разных компонентах

Question

У меня есть два разных угловых 6 компонента, каждый со своей страницей. На каждой странице есть разный список мат-карт разного mat-card-content цвета фона

хотя я меняю цвет, используя следующий код, обе страницы имеют один и тот же цвет (зеленый), есть какие-нибудь предложения, как настроить цвет фона?

list1.component.scss:
::ng-deep .mat-card-content {
  background-color: white 
}

list2.component.scss:
::ng-deep .mat-card-content {
  background-color: green 
}

пробовал с !important; без изменений

Answer 1

Без селектора :host стиль не инкапсулируется в области видимости компонента, поэтому применяются правила CSS: побеждает последний. Попробуйте:

list1.component.scss:
:host {
    ::ng-deep .mat-card-content {
      background-color: white 
    }
}

list2.component.scss:
:host{
    ::ng-deep .mat-card-content {
      background-color: green 
    }
}