角度材料:改变选项组的背景色不起作用

Question

我正在使用组件的角材料，让用户从宿舍名单中挑选一个宿舍。这个列表是按不同的城市分组的，但是用户只能点击宿舍，不能点击城市。到目前为止，一切都很正常，但是为了更酷的造型，我想改变列表的背景色。到目前为止，我可以轻松地更改选项(宿舍)的背景色。

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

但是，当我试图更改选项组(容纳城市)的背景色时，它不起作用：

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

我的结果如下：

​

​

这是我用来创建组件的完整代码：

<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>

如果一个选项-组总是一个城市/休眠组(如“G ppingen”或“路德维格斯堡”)，而这些选项是该城市的宿舍，如"Studentendorf G ppingen“或"OFD Wohnturm”。我想要的是城市也有蓝色的背景。

我还试着按照建议的这里将它添加到我的CSS中，但是它没有改变任何东西：

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

Answer 1

您可以通过将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示例

Answer 2

在style.css中设置类样式

这一次，你必须‘强迫’风格与新的！重要的是。

style.css

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