将自定义类添加到 mat-menu答案

【问题标题】：adding a custom class to a mat-menu将自定义类添加到 mat-menu
【发布时间】：2019-05-05 16:30:01
【问题描述】：

我为我的应用程序使用了几个菜单，为此我使用了 angular material mat-menu 组件。我可以通过在我的全局 css 文件中为菜单原始类编写 css 代码来更改所有菜单的样式。但是当我想使用 .custom-class-name .original-material-class-name{} 为其中一个添加一些特定样式时，它不会将这些样式应用于那个菜单。

这是 stackblitz 中的整个应用程序：app

header.component.html：

<div>
<a mat-button class="theme-menu-toggle-button" *ngIf="!menuAvailable" 
(click)="changeSidenavMode(!mode)">
  <mat-icon>menu</mat-icon>
</a>
<a href="#" fxHide.lt-md fxShow.gt-sm class="theme-user" mat-button 
[matMenuTriggerFor]="menu">
  <img src="assets/images/user.png" class="theme-profile-image rounded-circle">
  <span class="theme-profile-title">نام نام‌خانوادگی</span>
</a>
<mat-menu #menu="matMenu" class="profile-menu">
  <button mat-menu-item *ngFor="let option of profileOptions">
    <mat-icon>{{option.icon}}</mat-icon>
   <span>{{option.title}}</span>
  </button>
</mat-menu>

styles.css：

.profile-menu .cdk-overlay-pane::before{
 width: 0;
 height: 0;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-bottom: 15px solid #5E35B1;
 content: " ";
 position: absolute;
 top: 10px !important;
 animation: fadeInRightBig 0.75s;
}

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

在 backgroundClass 的 mat-menu 中添加自定义类：

   <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu" backdropClass="custom__menu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>

    .custom__menu + * .cdk-overlay-pane > div.mat-menu-panel > div.mat-menu-content {
      background-color: #777;
      button.mat-menu-item {
        color: white;
      }
    }

【讨论】：

这个类改变背景的样式而不是 mat-menu 本身的样式
我已经解释了这个方法，你可以通过做一些修改在 mat-menu-item 上实现它。

【解决方案2】：

只需在 mat-menu 元素上设置您想要的任何类。

<mat-menu #menu="matMenu" class="providers-menu" xPosition="after" yPosition="below">
    ...
</mat-menu>

您可以使用 ::ng-deep 在组件中设置菜单样式

::ng-deep .mat-menu-panel.providers-menu {
    margin-top: 65px;
    background-color: #263358;
}

有关更多信息，请参阅此 github 问题： https://github.com/angular/components/issues/10322

【讨论】：

这是正确的答案，因为背景面板只影响背景 html 元素。如果你想改变菜单面板的样式而不是背景，你需要使用这个建议的技术。
这不是正确的答案，因为“Angular 的 API 声明 ng-deep 伪类已被弃用。”
ng-deep 被“弃用”并不意味着这个答案是错误的。在 ng-deep 找到合适的替代品之前，我们中的许多人都会继续使用它。如果您不喜欢 ng-deep，请将 css 放在您的 styles.scss 中。有关更多信息，请参阅此问题：stackoverflow.com/questions/47024236/…

【解决方案3】：

将您的样式添加到 header.component.css，并将其导入您的页面：

@Component({
    selector: 'my-selector',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
})

更新：您需要在 css 标签的末尾添加 !important 标签。

.profile-menu .cdk-overlay-pane::before{
 width: 0 !important;
 height: 0 !important;
 border-left: 8px solid transparent !important;
 border-right: 8px solid transparent !important;
 border-bottom: 15px solid #5E35B1 !important;
 content: " " !important;
 position: absolute !important;
 top: 10px !important;
 animation: fadeInRightBig 0.75s !important;
}

【讨论】：

没有任何区别
我添加了重要信息。仍然没有区别。根据角度材料，将自定义样式应用于菜单等覆盖组件并不容易。 material.angular.io/guide/customizing-component-styles 我不知道该怎么做。
我找到了这个，希望对你有帮助：stackoverflow.com/questions/51932134/…
谢谢，但没有任何效果...全局样式，封装。无，...我尝试了所有这些都不起作用
尝试覆盖材质 css（使用 F12）+ 封装。没有一个适合我

【解决方案4】：

你应该使用 id 作为 html 标签并在 css 文件中使用它

什么意思？

【讨论】：

我只想改变那个菜单。使用 id 不会更改该菜单的 before 伪元素。您现在将颜色更改为红色，在所有菜单中都是红色。
你能给我一张图片，告诉我你到底想改变什么吗？