Angular 2 Material 自定义 md-menu

Question

我是 Angular 2 Material 的新手，我正在尝试自定义 md-menu 组件的样式。

<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon>
<md-menu #menu="mdMenu" [overlapTrigger]="false">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

预定义样式设置工作正常（例如将菜单设置为非重叠），但我想将 md-menu 设置为 100% 宽度并在 md-icon 之间有一点 space按钮，用于扩展菜单，我无法使用 predefined directives from Angular 2 Material.

到目前为止，我找到了使用 /deep/ css 命令的解决方案，但我了解到主流浏览器不再支持该命令。

自定义一个Angular2Material组件有什么好的方法？我如何设置我的 md-menu 的样式，使其具有 100% 的宽度和一些 space 之间的扩展按钮？

为了说明我在说什么： Draft of the menu

Answer 1

您可以将自定义 classes 传递给菜单。

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="my-full-width-menu">

然后您可以使用全局样式来定位 class。

不幸的是，根据您的需要，您需要了解一些关于菜单覆盖位置的信息，并对一些重新定位进行硬编码

.mat-menu-panel.my-full-width-menu {
  max-width: none;
  width: 100vw;
  margin-left: -8px;
  margin-top: 24px;
}

Plunker Demo

正确的方法是使用material的OverlayModule（当前在material包中，但很快移动到 cdk）。

Answer 2

在Angular中，ViewEncapsulation.Emulated是默认选项，这意味着它试图通过向宿主元素添加代理键等来缩小影响范围。一个选项可能是就是在下面添加css。但是请注意，这个 ng-deep 也将很快被弃用。必须等待才能知道替代方案！ https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

::ng-deep .mat-menu-panel {
  max-width: none!important;
  min-width: 400px!important;
}

Answer 3

要在不关闭此组件封装的情况下设置 mat-menu 样式，您应该使用 2 类来增加特异性，就像您已经做过的那样或使用 !important。但是，要使其正常工作，您应该将它们放入 全局样式表 中，这样您就可以覆盖默认样式。

Angular 2 Material 自定义 md-menu

Angular 2 Material Customize md-menu

html

css

angular-material2

angular