Angular 材质中 Mat-Menu 的自定义样式背景颜色答案

【问题标题】：Custom Styling Background Color for Mat-Menu in Angular MaterialAngular 材质中 Mat-Menu 的自定义样式背景颜色
【发布时间】：2017-10-04 21:55:14
【问题描述】：

我试图在我的 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 background-color 仍然显示为 md-menu 背景。

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

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

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

如何单独使用 CSS 完成此任务？

【问题讨论】：

他们已将 css 类从 md-menu 更改为 mat-menu。事实上，在材料 2 beta 12 中，他们已经弃用了所有 md 前缀，现在它对所有人都适用。
对，但这是一个 Angular 2 应用程序 - 如上所述。
从您在 html 代码中的标签中可以看出，这是一个使用 Material 的 Angular 2 应用程序。执行“npm install @angular/material@latest”，您将安装 angular material 2 beta 12。遇到和你一样的问题。
md-menu 和 mat-menu 是材质标签，而不是纯角度标签。查看 package.json 内部，您会发现对 @angular/material 的引用
我在尝试更改时遇到错误。而 md-menu 有效。所以在我们升级到 Angular 4 之前，我会一直保持这种状态。

标签： javascript css angular less angular-material

【解决方案1】：

你也可以这样用：

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

demo

【讨论】：

【解决方案2】：

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

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

【讨论】：

试过了。不幸的是，没有运气。
尝试：/deep/ .mat-menu-content { 背景：#555 !important; }
/deep/ 已弃用 :(
请注意，我是在 Angular 2 应用程序中说的。 /deep/ 将起作用。 ::ng-deep 不会。但对于 Angular4 ::ng-deep 将是可行的方法。