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中，并使用它来覆盖背景颜色，但也无济于事。如果我＆＃34;取消选择＆＃34;在我的浏览器控制台中该类的颜色，背景颜色消失（变得透明）。但是，正如我所说的，在我重新加载时，添加该类并覆盖我的CSS中的颜色并不会覆盖白色。

如何仅使用CSS实现此目的？

Answer 1

如果我没错，以下css应该适合你：

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

Answer 2

您也可以使用：

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

demo

Angular 2 App中{Md-Menu的自定义样式背景颜色

2 个答案: