角度材质中垫菜单的自定义样式背景颜色

Question

我试图在我的 Angular 2 应用程序中覆盖一些 Material2 样式，但到目前为止我无法让它工作。 具体来说，我想覆盖 md 菜单的背景颜色。 这是我的 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;
}

到目前为止，这似乎没有效果。 默认的#fff背景色仍然显示在 md 菜单背景中。

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

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

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

如何仅使用 CSS 来完成此操作？

Answer 1

你也可以使用这个：

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

演示

Answer 2

如果我没有错，下面的 css 应该适合你：

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