如何在Angular 5中的mat-menu覆盖上添加类？

Question

我查看了mat-menu API（https://material.angular.io/components/menu/api#MatMenu），但我找不到如何在mat-menu cdk overlay上添加类。

我想在cdk overlay上添加一个包含mat-menu模板的类。任何人都可以帮忙吗？

我想在父级cdk叠加上添加类，因为在响应式菜单中无法正确打开。请查看以下图片。

Answer 1

将backdropClass添加到mat-menu，然后在全局样式文件中添加样式。我认为cdk-overlay-pane是您要为其样式的样式。例如：

<mat-menu #subMenu="matMenu" backdropClass="sg-vertical-sub-menu">
</mat-menu>

.sg-vertical-sub-menu+* .cdk-overlay-pane {
    margin-top: 12px;
}

Answer 2

我遇到了同样的问题，这就是我在工具栏下方定位菜单所做的工作。

＆＃13;

＆＃13;

::ng-deep .cdk-overlay-pane {
  top: 48px!important;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

@Tom Jiang的效果很好，但是在styles.css中添加css可能会有些不便，并且很难找到代码。

更好的方法：：如果只想更改组件而不影响其他组件，则应在菜单中添加一个类。

HTMLElement

然后使用:: ng-deep设置菜单样式。

<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>

瞧！您的自定义设置不会影响其他组件。