如何在两个不同的组件中更改为角形材料2席卡背景颜色

Question

我有两个不同的角度6个组件，每个组件都有自己的页面。在每个页面上，都有一张具有不同mat-card-content背景颜色

的mat-card列表。

尽管我使用以下代码更改了颜色，但两个页面的颜色都是相同的（绿色），但是关于如何自定义背景色的任何建议？

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