javascript - Angular Material 中 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;
}

到目前为止这似乎没有效果。默认的 #fff 背景颜色仍然显示为 md-menu 背景。

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

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

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

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

Answer 1

你也可以使用这个:

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

demo