Как я могу изменить цвет выбранной опции 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>
Вы можете использовать атрибут aria-selected="true" из тега mat-list-option, чтобы настроить таргетинг на выбранный параметр,
и предоставить для него соответствующие свойства CSS.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Рабочая демонстрация Stackblitz
Принятый ответ работает нормально, но в нем используется жестко заданное значение цвета (background: rgba(0, 139, 139, 0.7)). Такой подход фактически нарушит ваши стили и цвета, если вы решите переключиться на другую предварительно созданную тему материала или использовать настраиваемую тему (как описано в Тематическое оформление страницы приложения Angular Material).
Итак, если вы используете 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
Если вы просто хотите использовать собственный цвет, я предлагаю выбрать один из Материал Спецификации, которые также представлены в 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, который срабатывает, когда опция активна, и 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);
}
Рабочая демонстрация
Иногда использование [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>
