设置 mat-menu 样式

Question

我对此有很多麻烦，并且明显的解决方案不起作用或我做错了什么（可能是后者）。

我想设置我的 mat-menu 和 mat-menu-item 的样式，我试过这样做：

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

但它不起作用，我的菜单看起来像这样（没有异常）

 <mat-menu #infoMenu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Resume</span>
  </button>
  <button mat-menu-item>
    <mat-icon>voicemail</mat-icon>
    <span>Portfolio</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>References</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Contact</span>
  </button>
</mat-menu>

我也尝试过 /deep/ 但我知道它不应该工作，实际上应该在 Angular 4 中贬值，但我这样做是为了测试，我不知道此时如何设置元素的样式。

原文由 Cacoon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

app.component.ts

 import { Component, ViewEncapsulation ... } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  constructor() { }
}

我的.component.css

 .mat-menu-content {
    background-color: 'red' !important;
}

我通常使用它来设置高度和溢出 css 的样式，但总体思路仍应代表背景颜色。请注意，可能还有其他具有背景颜色的覆盖 div，但您应该能够通过它们的 .mat-menu-<item name> css 以这种方式访问它们，并以相同的方式更改子项。

原文由 Z. Bagley 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一种解决方案（1）允许我们保留默认的 ViewEncapsulation 并且（2）不需要弃用的 ::ng-deep

app.component.html

 <mat-menu #infoMenu="matMenu" class="my-class">...

然后在你的全局样式表中

样式.css

 .mat-menu-panel.my-class {
  background-color: red;
}

该解决方案在 Angular/Components git 存储库中提供： https ://github.com/angular/components/issues/16742

该解决方案的原作者在这里提供了一个stackblitz： https ://stackblitz.com/edit/angular-y3jqzt

原文由 Jack Daus 发布，翻译遵循 CC BY-SA 4.0 许可协议