Html Angular 2材质自定义md菜单

我是Angular 2材质的新手，我正在尝试自定义md菜单组件的样式

<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>

dehaze
项目1
项目2

预定义的样式设置工作正常（例如，将菜单设置为非重叠），但我希望将md菜单设置为100%宽度，并且在md图标按钮之间留有一点空间，以扩展菜单，这是我无法使用的

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

自定义角度2材质组件的好方法是什么？我如何设计我的md菜单，使其具有100%的宽度，并且在扩展按钮之间有一些空间

为了说明我所说的：

---

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

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

---

正确的方法是使用材质的OverlyModule（当前在材质包中，但很快将移动到cdk）创建自定义覆盖组件。

在角度视图封装中。Emulated是默认选项，这意味着，它试图通过向宿主元素添加代理键等来缩小影响范围。一个选项是在css下面添加代理键。但请注意，这个ng deep也将很快被弃用。必须等待知道替代方案

---

若要在不关闭此组件封装的情况下设置mat菜单的样式，您应该使用2个类来增加特定性，就像您已经使用或正在使用的那样！重要的。但是，要使其正常工作，您应该将它们放入您的全局样式表中，以便覆盖默认样式。

谢谢，您的解决方案对我有效。我还有两个问题：为什么你知道你需要使用“.mat菜单面板”？我在棱角材料文档中没有看到这个名字。是否可以在app.component.css中而不是在global styles.css中定义该类？我试过了，但当代码部分位于global styles.css中时，它似乎起作用了。我在打开菜单后检查DOM，决定使用

.mat菜单面板

。我不确定这个类将被添加到哪里，所以我必须进去找到它。为了使原始.mat菜单面板样式更加具体，必须至少使用2个选择器。当然，您可以在app.component.css中定义这些样式，但必须在组件中将ViewEncapsulation设置为None。这是因为菜单面板是md菜单组件的直接子级，而不是您的应用程序组件！

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

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