Set mat-menu style

Question

Im having alot of trouble with this, and the apparent solutions aren't working or im doing something wrong (probably the latter).

I want to style my mat-menu and the mat-menu-item's, ive tried doing this:

::ng-deep .mat-menu{
  background-color:red;
}

But it doesnt work, my menu looks like this (nothing abornomal)

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

I have also tried /deep/ but I know that shouldn't work and in fact should be depreciated in Angular 4 but I did it to test, I am not sure how to style the elements at this point.

Luteous

.mat-menu-panel might help, as well as using ViewEncapsulation.None – Linnette

the panel call sadly doesnt do anything, and im not sure where I would set that viewencapsulation to none? D: – Luteous

I'll go ahead and write up a more detailed answer for ya – Linnette

I had to edit the answer to make it clear that your root component controls the mat-menu and needs to control the encapsulation. – Linnette

I got it working, just wondering, this viewencapsulation setting, will it affect the children called in the html file, or just the file itself – Luteous

Cleanest way to do this is having a custom theme scss and add your css rules for .mat-menu in there. Check out blog.thoughtram.io/angular/2017/05/23/… – Borowski

Answer 1

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

I typically use this to style the height and overflow css, but the general idea should still stand for background-color. Please note that there may be other overlaying divs with background-colors, but you should be able to access them in this way by their .mat-menu-<item name> css and change children items in the same manner.

Linnette

Thanks so much! I was just wondering how to also edit the fade color, it starts at the 'default' grey color and fades into the custom color I set like how you showed, is that just trial and error? Im not asking because im trying to imply youre wrong just wondered if you knew, thanks for this brilliant solution! – Luteous

Update 2: I really need to say thanks again, this fix is allowing me to finally customize everything in Material 2 easily and effectively!! <3 – Luteous

Update 3: This caused very strange problems in rendering on Mobile browsers (the enabling of encapsulation that is) so be aware! – Luteous

@Luteous This answer is now deprecated, since they have added an input directive to directly inject whatever class you'd like: @Input('class') panelClass: string material.angular.io/components/menu/api – Linnette

Awesome, material keeps making great progress – Luteous

Note that ViewEncapsulation.None will affect all mat-menu-content in the entire application. – Sangfroid

Though the answer may be near six year old , it is still good for me. anything to avoid ngdeep – Maccaboy

Answer 2

Easier Way If you want to change your component only without affecting other components, you should add a class to the menu.

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

Then style your menu with ::ng-deep.

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

voila!! your customization will not affect other components.

Another Way: you can add backdropClass to the menu.

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

Then add CSS style class with +* in your styles.css

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

This is also accomplished without affecting others, but adding css in styles.css may be a bit inconvenient.

Ouellette

the second way seems to be good one .. as ng-deep is deprecated – Cardiac

<mat-menu [class]="'customize'"></mat-menu> and ::ng-deep .mat-menu-panel.constrast { background: red; } did it for me – Giefer

Answer 3

Define original background-color and mouseover color both in the CSS:

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

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

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

Clywd

This helped me, thanks. Dear user avoid using !important. – Matildamatilde

Answer 4

Another solution which (1) allows us to keep our default ViewEncapsulation and (2) does not require the deprecated ::ng-deep

app.component.html

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

And then in your global styles sheet

styles.css

.mat-menu-panel.my-class {
  background-color: red;
}

This solution was provided in the Angular/Components git repository: https://github.com/angular/components/issues/16742

The original author of this solution provided a stackblitz here: https://stackblitz.com/edit/angular-y3jqzt

Yentai

Pretty sure this is the best answer to the original question. ::ng-deep is bad, !important is bad and changing how you configure your component just to get a style to work is bad. This solution works and avoids all the bad stuff. – Confident

Mostly agree with David's comment. basically the reason for having to do this is that the CDK overlay is at the top level of the DOM, and the menu is rendered inside the CDK overlay – Milzie

perfect answer! you deserve a free coffee – Pteridology

Answer 5

Since ::ng-deep is deprecated, this is how I customize mat-menu

<mat-menu class="user-menu" #menu="matMenu">
   <button mat-menu-item>Profile</button>
   <button mat-menu-item>Settings</button>
</mat-menu>

In the new version of Angular Material, I used the base class of mat-menu, which is mat-mdc-menu-panel

.mat-mdc-menu-panel.user-menu {
  background-color: red;
}

Tinkling

Is this supposed to require disabling view encapsulation? Because I can't get it to work otherwise. – Lombroso

Answer 6

I customized angular material element mat-menu by using ::ng-deep

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

while css class was as follows

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

and it got applied to each and every internal class of mat-menu

Cochise