Angular материал: изменение цвета фона группы опций не работает

Question

Я использую компонент <mat-select> из Angular Material, чтобы пользователь мог выбрать общежитие из списка общежитий. Список сгруппирован по разным городам, но пользователь может нажимать только на общежития, но не на города. Пока все работает, но для более крутого стиля я хочу изменить цвет фона списка. Пока я могу легко изменить цвет фона опций (общежитий) с помощью

<mat-option style="background-color: rgb(0, 168, 255, 0.5);>

Но когда я пытаюсь изменить цвет фона групп опций (которые содержат города), это не так. работа:

<mat-optgroup style="background-color: rgb(0, 168, 255, 0.8);">

Итак, мой результат выглядит следующим образом:

This is the full code I'm using to create the component:

<mat-form-field appearance="fill">
    <mat-label>wohnheim</mat-label>
    <mat-select [formcontrol]="dormcontrol" (selectionchange)="changeselecteddorm($event)">
        <mat-optgroup style="background-color: rgb(0, 168, 255, 0.5);" *ngfor="let group of dormgroups"  [label]="group.name" [disabled]="group.disabled">
            <mat-option style="background-color: rgb(0, 168, 255, 0.5);" *ngfor="let dorms of group.dorms" [value]="dorms.name">
                {{dorms.name}}
            </mat-option>
        </mat-optgroup>
    </mat-select>
</mat-form-field>

Где группа опций всегда является city / dormGroup (например, «Геппинген» или «Людвигсбург») и варианты - общежития в этом городе, например, «Студентендорф Геппинген» или «OFD Wohnturm». Я хочу, чтобы города также имели синий фон.

Я также пробовал добавить это в свой CSS, как предлагалось здесь , но это ничего не изменило:

optgroup {
    background-color: gray;
    color: red;
}

Answer 1

Установить стиль класса в стиле. css

На этот раз вам также нужно «принудительно» использовать стили с помощью! Important.

style. css

.mat-optgroup{ 
width:2000px !important; 
background-color: red !important; 
font-size: 10px !important; } 

Answer 2

Вы можете исправить это, добавив правило display: block к этому тегу mat-optgroup:

<mat-optgroup style="background-color: rgb(0, 168, 255, 0.5); display: block"
                                                              ^^^^^^^^^^^^^^

Или вы можете добавить то же самое в свой компонент css файл:

mat-optgroup {
  display: block;
  background-color: rgb(0, 168, 255, 0.5);
}

Пример Stackblitz