adding a custom class to a mat-menu - css

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

you should use id for html tag and use it in css file
What do you mean?