добавление пользовательского класса в мат-меню

Question

Я использую несколько меню для своего приложения, и для этого я использую угловой компонент меню материала.Я могу изменить стиль всех меню, написав код CSS в моем глобальном файле CSS для оригинальных классов меню.но когда я хочу добавить некоторые конкретные стили к одному из них, используя .custom-class-name .original-material-class-name {}, он не применяет эти стили к этому одному меню.

вотвсе приложение в стеке: приложение

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

вы должны использовать идентификатор для HTML-тега и использовать его в файле CSS

Что вы имеете в виду?

Answer 2

Добавление пользовательского класса в мат-меню в фоновом классе:

   <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

Добавьте ваши стили в header.component.css и импортируйте их на свою страницу:

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

ОБНОВЛЕНИЕ: вам нужно добавить! Важные теги в конце ваших тегов CSS.

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