Set mat-menu style

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.

Continue reading...