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菜单设置为100％宽度并在md-icon按钮之间留出一点空间，这会扩展菜单，predefined directives from Angular 2 Material无法做到。

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

定制Angular 2 Material组件的好方法是什么？我怎样才能设置我的md菜单样式，以便它在扩展按钮之间有100％的宽度和一些空间？

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

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 Demo

正确这样做的方法是使用素材的OverlayModule（材质包中的当前，但很快将移动到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

3 个答案: