如何在两个不同的组件中更改为 angular material 2 mat-card 背景颜色

Question

我有两个不同的 angular 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 
    }
}

如何在两个不同的组件中更改为 angular material 2 mat-card 背景颜色

how to change to angular material 2 mat-card background color in two different components

angular-material2