angular - 如何自定义垫选择下拉位置？

Question

我已经好几天没找到解决方案了。由于 mat-menu 有一个选项是 overlaptrigger 属性，但在 mat select 下拉列表中没有执行此操作的属性。有没有办法通过覆盖 css 或任何更好的解决方案来自定义 mat-select 下拉位置。

Answer 1

<mat-select placeholder="Language" disableOptionCentering panelClass="myPanelClass">
    <mat-option *ngFor="let locale of locales" [value]="locale">
        {{locale}}
    </mat-option>
</mat-select>

像我上面那样使用disableOptionCentering 和panelClass。然后在您的 styles.scss 中引用您的 panelClass 并执行

.myPanelClass{
    margin-top: 30px !important; 
}

这对我有用。请注意，scss 必须在您的 styles.scss 中，而不是您组件的 scss 文件中。你可能不需要在这里使用 important，我有其他关于它的类，所以我确实使用了它。