adding a custom class to a mat-menu

Question

I use several menus for my app and I use angular material mat-menu component for this. I can change the style of all menus by writing css code in my global css file for menu original classes. but when I want to add some specific styles to one of them using .custom-class-name .original-material-class-name{} it doesn't apply those styles to that one menu.

here's the whole app in 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;
}

score 8 · Answer 1 · answered Sep 16 '20 at 19:09

8

Simply set whatever class you want on the mat-menu element.

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

You can style the menu in your component by using ::ng-deep

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

For more information see this github issue: https://github.com/angular/components/issues/10322

answered Sep 16 '20 at 19:09

squirtgun

629
9
12

This is the right answer since backdropPanel effects only the backdrop html element. If you want to change the styles of the menu panel and not the backdrop you need to use this suggested technique. – Ori Calvo Jan 07 '21 at 09:24
this is not the correct answer as "Angular's API states that the ng-deep psuedo-class is deprecated." – Michael Parkadze Jun 08 '21 at 08:15
ng-deep being "deprecated" doesn't mean this answer is wrong. Until there is a suitable replacement for ng-deep, many of us will keep using it. If you don't like ng-deep, then put the css in your styles.scss instead. See this question for more info: https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep – squirtgun Jun 08 '21 at 17:27

score 5 · Answer 2 · answered May 01 '19 at 13:56

5

Add custom class in the mat-menu in backdropClass:

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

answered May 01 '19 at 13:56

Nikhil Paliwal

149
2
5

1

this class changes the styling of backdrop not styling of mat-menu itself – Muhammad Awais Sep 03 '20 at 11:16
I've explained the approach by this, you can implement it on the mat-menu-item by doing some modification. – Nikhil Paliwal Sep 04 '20 at 14:11

rcanpahali · Answer 3 · 2018-12-04T09:41:17.483

0

Add your stylings to header.component.css, and import it in your page:

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

UPDATE: You need to add !important tags at end of your css tags.

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

edited Dec 04 '18 at 09:41

answered Dec 04 '18 at 09:36

rcanpahali

2,565
2
21
37

didn't make any difference – Nastaran Heydari Dec 04 '18 at 09:39
I added important. still no difference. according to angular material, applying custom styles to overlay components like menu is not that easy. https://material.angular.io/guide/customizing-component-styles and I don't know how to do this. – Nastaran Heydari Dec 04 '18 at 09:48
I found this, I hope it will help: https://stackoverflow.com/questions/51932134/how-to-override-material-css-styles – rcanpahali Dec 04 '18 at 09:54
thanks, but nothing works... global style, encapsulation.None ,... I tried all of them it doesn't work – Nastaran Heydari Dec 04 '18 at 10:01
try to override material css (use F12) + encapsulation.None that works for me – RikiF Dec 04 '18 at 12:17

miladdn131 · Answer 4 · 2018-12-04T09:56:51.837

0

you should use id for html tag and use it in css file

What do you mean?

edited Dec 04 '18 at 09:56

answered Dec 04 '18 at 09:45

miladdn131

72
5

I just want that menu to change. using id doesn't change the before pseudo element of that menu. you changed the color to red now that is red in all menus. – Nastaran Heydari Dec 04 '18 at 10:02
Can you give a picture and show me what exactly you want to change? – miladdn131 Dec 04 '18 at 10:14

adding a custom class to a mat-menu

4 Answers4