设置 mat-menu 样式

Posted 2023-03-06

【中文标题】设置 mat-menu 样式

【英文标题】：Set mat-menu style

【发布时间】：2018-03-30 23:14:06

【问题描述】：

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

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

【问题讨论】：

.mat-menu-panel 可能会有所帮助，以及使用ViewEncapsulation.None

面板调用很遗憾没有做任何事情，我不确定我会在哪里将该 viewencapsulation 设置为 none？ D：

我会继续为你写一个更详细的答案

我必须编辑答案以明确您的根组件控制mat-menu 并且需要控制encapsulation。

我得到它的工作，只是想知道，这个viewencapsulation设置，它会影响在html文件中调用的孩子，还是只是文件本身

【参考方案1】：

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

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

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

::ng-deep .customize 
  background: red;

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

另一种方式： 您可以将背景类添加到菜单中。

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

然后在你的styles.css中添加带有+*的CSS样式类

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

这也是在不影响别人的情况下完成的，但是在styles.css中添加css可能有点不方便。

【讨论】：

第二种方式似乎不错......因为ng-deep已被弃用

<mat-menu [class]="'customize'"></mat-menu> 和 ::ng-deep .mat-menu-panel.constrast background: red; 为我做的

【参考方案2】：

app.component.ts

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

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

export class AppComponent 
  constructor()  

my.component.css

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

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

【讨论】：

非常感谢！我只是想知道如何编辑淡入淡出颜色，它从“默认”灰色开始，然后淡入我设置的自定义颜色，就像你展示的那样，这只是反复试验吗？我没有问，因为我试图暗示你错了只是想知道你是否知道，感谢这个出色的解决方案！

更新 2：我真的需要再次表示感谢，这个修复让我终于可以轻松有效地自定义 Material 2 中的所有内容！

更新 3：这会导致在移动浏览器上呈现非常奇怪的问题（即启用封装），所以请注意！

@Cacoon 这个答案现在被弃用了，因为他们已经添加了一个输入指令来直接注入你想要的任何类：@Input('class') panelClass: stringmaterial.angular.io/components/menu/api

太棒了，材料不断进步

【参考方案3】：

在 CSS 中定义原始 background-color 和 mouseover 颜色：

.mat-menu-item 
  color: blue !important;


button.mat-menu-item
    background-color: white;


button.mat-menu-item:hover 
    background-color: blue;
    color: #fff !important;

【讨论】：

这对我有帮助，谢谢。亲爱的用户避免使用 !important。

【参考方案4】：

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

app.component.html

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

然后在你的全局样式表中

styles.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

【参考方案5】：

我使用::ng-deep自定义了角度材质元素mat-menu

<mat-menu #createPlan="matMenu" class="custom-menu">
    <button mat-menu-item [matMenuTriggerFor]="profilestypes">Client Profile</button>
          <button mat-menu-item>Supplier Profile</button>
    <button mat-menu-item>Advisor Profile</button>
</mat-menu>

而css类如下

::ng-deep .custom-menu
  margin-top: 15px;

它被应用于每个内部的 mat-menu 类