css - 设置菜单样式

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 中贬值但我这样做是为了测试，我不确定此时如何设置元素的样式。

Answer 1

更简单的方法如果您只想更改您的组件而不影响其他组件，您应该向菜单添加一个类。

<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>

然后使用::ng-deep 设置菜单样式。

::ng-deep .customize {
  background: red;
}

瞧!!您的自定义不会影响其他组件。

另一种方式:您可以将 backdropClass 添加到菜单中。

 <mat-menu #infoMenu="matMenu" backdropClass="customize"></mat-menu>

然后在 styles.css 中用 +* 添加 CSS 样式类

.customize+* .mat-menu-panel {
  background: red;
}

这也是在不影响其他的情况下完成的，只是在styles.css中加入css可能会有点不方便。