Html 如何设置角材质选择的样式

我想从角度材质中选择一个组件。具体而言，我希望将包含选项的面板向下移动到显示选定值的字段下方

此选项列表位于id为“cdk overlay…”的div中，它似乎决定了列表的位置。这个div使用element.style属性设置样式，我不能用css覆盖它

大概这个样式属性仍然基于较低级别上的一些css。它在哪里？我如何改变它？记录在哪里

---

我认为可以通过在组件样式表中重新定义css类并打破视图封装来覆盖css类的属性

your-component.scss

.class-to-override {
    color: white
}

your-component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@component({
    ...
    encapsulation: ViewEncapsulation.None
})
export class YourComponent implements OnInit {
    ...
}

---

如果使用的是角材质v6，则可以应用：

<mat-select panelClass="options" disableOptionCentering ...></mat-select>

---

破坏视图封装并不是一个真正的选项。讨论中的样式也不在css类中，而是在element.style属性中。你可以按照我提供的链接在stackblitz中尝试你的解决方案。这在stackblitz示例中似乎不起作用。。。

.options {
   margin-top: 2em;
}