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按钮之间留出一点空间，但使用Angular 2 Material的预定义指令无法实现。

到目前为止，我发现使用/deep/ css命令可以解决问题，但是我读到这个命令不再被主要浏览器支持。

有没有一种良好的方法可以自定义Angular 2 Material组件？ 我该如何设计我的md-menu，以使其具有100％的宽度并在其扩展按钮之间留有一些空间？

为了说明我的意思： 菜单的草案

- Polarfox

Answer 1

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

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

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

对于您的需求，不幸的是，您需要了解有关菜单覆盖层位置的一些信息，并硬编码一些重新定位的内容。

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

Plunker演示

做这件事情的正确方式是使用材料设计的OverlayModule创建自定义覆盖组件（当前在材料包中，但很快将移动到cdk中）。

- Will Howell

---

谢谢，你的解决方案对我很有帮助。我还有两个问题：你是怎么知道需要使用“.mat-menu-panel”的？我在Angular Material文档中没有看到这个名称。另外，是否可以在app.component.css中定义该类，而不是全局styles.css中定义？我尝试了一下，但只有当代码部分在全局styles.css中时才有效。 - Polarfox

我在打开菜单后检查DOM，想出了使用 .mat-menu-panel 的方法。我不确定这个类会被添加到哪里，所以我必须进去找到它。为了更具体地指定原始的 .mat-menu-panel 样式，重要的是使用至少2个选择器。当然，你可以在 app.component.css 中定义这些样式，但你必须在组件中将 ViewEncapsulation 设置为 None。这是因为 menu-panel 是 md-menu 组件的直接子元素，而不是你的应用程序组件！ - Will Howell

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

- nsk

Answer 3

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

- Atanas Beychev