Question

我在多个地方使用md-menu但只在一个页面中菜单背景需要是不同的颜色。

当我尝试使用阴影穿孔（/deep/或>>>）时，它会影响应用程序中的所有其他md菜单。

这是溢出的CSS：

>>> .mat-menu-content {
      background: skyblue;
      color: #FFFFFF;
}

我有Plunker来演示我的问题。我在Form1中为菜单添加了上面的css，但是Summary页面中的菜单也受其影响。

如何仅为Form1更改md菜单的背景颜色？

Answer 1

您可以在菜单中添加课程

>>> .my-menu .mat-menu-content {
    background: skyblue;
    color: #FFFFFF;
}

_

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

Answer 2

将课程添加到md-menu

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="my-menu">
         <button md-menu-item>Item 1</button>
         <button md-menu-item>Item 2</button>
       </md-menu>

您已将课程添加到md-button

<button md-raised-button color="primary" [mdMenuTriggerFor]="menu" class="my-menu">Menu</button>

材质2 md菜单如何仅更改一个菜单的背景颜色

2 个答案: