将自定义类添加到 mat-menu

Question

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

\n\n

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

\n\n

header.component.html：

\n\n

<div>\n<a mat-button class="theme-menu-toggle-button" *ngIf="!menuAvailable" \n(click)="changeSidenavMode(!mode)">\n  <mat-icon>menu</mat-icon>\n</a>\n<a href="#" fxHide.lt-md fxShow.gt-sm class="theme-user" mat-button \n[matMenuTriggerFor]="menu">\n  <img src="assets/images/user.png" class="theme-profile-image rounded-circle">\n  <span class="theme-profile-title">\xd9\x86\xd8\xa7\xd9\x85 \xd9\x86\xd8\xa7\xd9\x85\xe2\x80\x8c\xd8\xae\xd8\xa7\xd9\x86\xd9\x88\xd8\xa7\xd8\xaf\xda\xaf\xdb\x8c</span>\n</a>\n<mat-menu #menu="matMenu" class="profile-menu">\n  <button mat-menu-item *ngFor="let option of profileOptions">\n    <mat-icon>{{option.icon}}</mat-icon>\n   <span>{{option.title}}</span>\n  </button>\n</mat-menu>\n

\n\n

样式.css：

\n\n

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

\n

Answer 1

只需在 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

Answer 2

在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;
      }
    }

Answer 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;
}