如何在mat-select选项展开时修改其样式属性？

问题场景 #

需要调整Angular Material中mat-select在下拉选项展开时的样式。

初次尝试及问题 #

最初尝试通过:focus选择器来设置样式：

<mat-select class="selector">
     <mat-option></mat-option>
</mat-select>

.selector:focus {
   color: green;
}

但这个方案效果不佳，因为:focus状态和下拉选项的展开状态并不完全绑定——点击mat-select时，控件可能获得焦点但并未展开选项，导致样式触发时机和预期不符。

最终解决方案 #

利用mat-select组件在选项展开时会自动设置aria-expanded="true"属性的特性，使用属性选择器精准定位展开状态的控件：

.mat-select[aria-expanded="true"] { 
    color: green;
}

这个选择器只会匹配处于展开状态的mat-select，样式效果更准确。

内容的提问来源于stack exchange，提问作者Mat