Угловой материал - Изменить цвет опции списка матов на выбранном

Question

Как я могу изменить цвет выбранной опции 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>

Answer 1

Вы можете использовать атрибут aria-selected="true" из тега mat-list-option, чтобы указать выбранную опцию,
и предоставить соответствующие свойства CSS для того же.

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

Рабочая демонстрация Stackblitz

Answer 2

Выпадающий список:

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);
}

Работающий Демо