Solución:
Puedes usar aria-selected="true" atributo de mat-list-option etiqueta para apuntar a la opción seleccionada,
y proporcionar las propiedades CSS correspondientes para el mismo.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Demostración de trabajo de Stackblitz
La respuesta aceptada funciona bien, pero usa un valor de color codificado (background: rgba(0, 139, 139, 0.7)). Este enfoque realmente romperá sus estilos y colores si decide cambiar a otro tema de material preconstruido o usar un tema personalizado (como se describe en la página de la aplicación Tematización de su material angular).
Entonces, si usa SCSS, puede usar el siguiente código en el archivo de estilo de su componente:
@import '[email protected]/material/theming';
mat-list-option[aria-selected="true"] {
background: mat-color($mat-light-theme-background, hover, 0.12);
}
El código anterior está adaptado de mat-select options – de esta manera, tendrá una apariencia consistente en toda la aplicación:
.mat-option.mat-selected:not(.mat-option-multiple) { background: mat-color($background, hover, 0.12);}
Manifestación: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-qaq1xr
O, si usa un tema oscuro, cambie el código de la siguiente manera:
mat-list-option[aria-selected="true"] {
background: mat-color($mat-dark-theme-background, hover, 0.12);
}
Manifestación: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-w8beng
Si solo desea usar un color personalizado, le sugiero que elija uno de Material Specs, que también está expuesto en Angular Material Design scss.
$primaryPalette: mat-palette($mat-green);
mat-list-option[aria-selected="true"] {
background: mat-color($primaryPalette, 500);
}
Manifestación: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-tt3nyj