如何更改mat-list-option 所选选项的颜色？
现在我有这样的东西：
我的代码是这样的：
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
【问题讨论】：
标签： angular angular-material angular2-template angular-material2 angular2-material
您可以使用 mat-list-option 标记中的 aria-selected="true" 属性来定位所选选项，
并为其提供相应的 css 属性。
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
【讨论】：
接受的答案可以正常工作，但它使用硬编码颜色值 (background: rgba(0, 139, 139, 0.7))。
如果您决定切换到另一个预构建材料主题或使用自定义主题（如Theming your Angular Material app 页面中所述），这种方法实际上会破坏您的样式和颜色。
因此，如果您使用 SCSS，您可以在组件的样式文件中使用以下代码：
@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);}
演示：https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-qaq1xr
或者，如果您使用深色主题，请按如下方式更改代码：
mat-list-option[aria-selected="true"] {
background: mat-color($mat-dark-theme-background, hover, 0.12);
}
演示：https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-w8beng
如果你只是想使用自定义颜色，我建议从Material Specs 中选择一个，它也在Angular Material Design scss 中公开。
$primaryPalette: mat-palette($mat-green);
mat-list-option[aria-selected="true"] {
background: mat-color($primaryPalette, 500);
}
演示：https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-tt3nyj
【讨论】：
下拉：
mat-list-option在选项处于活动状态时触发mat-option.mat-active 987654325 mat-option.mat-selected选择选项时。根据您的需要，将以下内容添加到您的 CSS 以修改活动或选定样式。
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
工作Demo
选择列表：
选择列表具有aria-selected 属性，默认为false。如果您选择该项目，它将更改为true。您只需将 CSS 设置如下：
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
工作Demo
【讨论】：
有时使用[aria-selected] 似乎太“迟钝”了。
您还可以获取节点的选定状态并根据需要使用它。
<mat-list-option #option>
<app-custom-list-option-widget [selected]="option.selected"></app-custom-list-option-widget>
</mat-list-option>
[aria-selected]
.is-selected { color: red; }
然后在模板中：
<mat-list-option #option>
<span [class.is-selected]="option.selected"> Option text </span>
</mat-list-option>
【讨论】：
对于 mat-list-option 属性 css 的变化，
改变 onHover css :
.mat-list-option:hover {
width: 270px!important;
}
更改 OnActive css：
.mat-list-option[aria-selected="true"] {
width: 270px!important;
}
.mat-list-option:active,
.mat-list-text:active{
background-color: none!important;
}
【讨论】：