Angular 角度材质-更改选定材质上“材质列表”选项的颜色

如何更改

材料列表选项的选定选项的颜色？
现在我有这样的事情：

<mat-selection-list #list>
    <mat-list-option *ngFor="let yuvak of yuvaks">
    {yuvak.name}
    {yuvak.phonenumber}
     </mat-list-option>
</mat-selection-list>

当前列表

我想将整个选项或“选择”卡的颜色更改为绿色。大概是这样的：

我的代码如下：

<mat-selection-list #list>
    <mat-list-option *ngFor="let yuvak of yuvaks">
    {yuvak.name}
    {yuvak.phonenumber}
     </mat-list-option>
</mat-selection-list>


{yuvak.name}
{yuvak.phonenumber}
下拉列表：

mat list选项
具有
mat option.mat active
，该选项在选项激活时触发，而
mat option.mat selected则在选项选中时触发。根据您的需要，将以下内容添加到CSS中以修改活动或选定的样式

.mat-option.mat-active {
  background: blue !important;
}

.mat-option.mat-selected {
  background: red !important;
}

工作

选择列表：

选择列表具有
aria selected
属性，默认情况下为
false
。如果您选择该项目，它将变为
true
。您只需按如下方式设置CSS：

.mat-list-option[aria-selected="true"] {
  background: rgba(200, 210, 90, 0.7);
}

工作
您可以使用
标记中的

mat-list-option[aria-selected="true"] {
  background: rgba(0, 139, 139, 0.7);
}

接受的答案工作正常，但它使用了一个硬编码颜色值（
背景：rgba（0，139，139，0.7）
）。
如果您决定切换到另一个预构建材质主题或使用自定义主题（如第页所述），这种方法实际上会破坏您的样式和颜色

因此，如果使用SCS，可以在组件的样式文件中使用以下代码：

@import '~@angular/material/theming';

mat-list-option[aria-selected="true"] {
  background: mat-color($mat-light-theme-background, hover, 0.12);
}

以上代码改编自
mat select options——这样，您将在整个应用程序中拥有一致的外观：
.mat option.mat selected:not（.mat option multiple）{background:mat color（$background，hover，0.12）；}

演示：

或者，如果使用黑色主题，请按如下方式更改代码：

mat-list-option[aria-selected="true"] {
  background: mat-color($mat-dark-theme-background, hover, 0.12);
}

演示：

如果你只是想使用一种定制的颜色，我建议你从中挑选一种，这种颜色也会暴露在有角度的材质设计中

演示：
我正在使用选择列表。这是下拉列表。@TanmayParmar编辑我的选择列表答案。我还没有实现，但从演示中我认为这会起作用。但是，我在哪里可以找到属性的文档，如aria selected？。请搜索网络，因为每当我检查mat list选项并发现该属性被触发时，我都会查找dom更改，所以我继续使用属性到样式mat list选项标记。@TanmayParmar请将答案向上投票，它有助于用户寻找答案。伟大的解决方案。我一直在使用typescript中的一个方法，它接受一个项目并检查它是否在所选项目的列表中，但是以已经提供的实际属性为目标要好得多。谢谢你指出这一点。