如何在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

@Tom Jiang 确实工作得很好，但是在 styles.css 中添加 css 可能有点不方便并且很难找到代码。

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

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

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

::ng-deep .customize {
  background: red;
}

瞧！您的定制不会影响其他组件。