角材料中Mat-Menu的自定义样式背景颜色

Question

我正在尝试在Angular 2应用程序中覆盖某些Material2样式，到目前为止，我无法使其正常工作。具体来说，我想覆盖md-menu的背景颜色。这就是我的html的样子：

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="sub-drop-bg">
  <button md-menu-item routerLink="option-A" class="sub-drop-item">Option A</button>
...
</md-menu>

这就是我尝试在我的LESS / CSS中添加的内容：

md-menu.sub-drop-bg /deep/ {
  background-color: #555 !important;
}

到目前为止，这似乎没有任何效果。 md-菜单背景仍然显示默认的#fff background-color。

作为附加信息，当我将鼠标悬停并检查元素时，我看到默认的mat-menu-content类具有白色背景样式，如下所示：

.mat-menu-content {
    background: #fff;
}

我已经尝试将该类添加到组件CSS中，并使用它覆盖背景色，但也无济于事。如果我在浏览器控制台中为该类“取消选择”该颜色，则背景颜色消失（变为透明）。但是，正如我所说，在重新加载时，添加该类并覆盖CSS中的颜色不会覆盖白色。

如何单独使用CSS完成此操作？

Answer 1

如果我没记错的话，以下CSS应该适合您：

/deep/ .mat-menu-content {
  background-color: #555 !important;
}

Answer 2

您也可以使用此：

::ng-deep .mat-menu-content{
  background-color:red;
}

demo