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.

Answer 1

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.

Answer 2

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