Как я могу применить пользовательский класс рядом с CDK-Overlay-Pane для меню материала в угловых 7

Question

У меня есть требование, где я хочу создать мега-меню, используя меню угловых материалов.Теперь я хочу применить некоторый стиль к cdk-overlay-pane, используя собственный пользовательский класс, для этого я использовал атрибут class и panelClass, но у меня это не работает.

Я пытался применить пользовательский класс при использовании атрибута class и panelClass,пожалуйста, проверьте код ниже

<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass='CustomClass'>

<mat-menu #menu="matMenu" [overlapTrigger]="false" class='CustomClass'>

ни один из приведенных выше кодов не работает для меня.

это должен быть применен пользовательский класс следующийк классу панели cdk, когда угловой материал открывает меню cdk overlay

Answer 1

Попробуйте это в вашей css ... иерархия является довольно уникальной и сложной, когда вы открываете элемент проверки:

::ng-deep .cdk-overlay-pane .mat-menu-panel .mat-menu-content { background: lightblue }
::ng-deep .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item {color: blue;}

Обновление :

если вы хотите использовать свой собственный класс, обратитесь к правильной панели, используя ваш класс релевантно css :

::ng-deep .customClass .mat-menu-content {border:1px solid red; background:lightblue}
::ng-deep .customClass .mat-menu-content .mat-menu-item {color:blue;}

релевантно HTML :

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" class='customClass' >
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Вы можете увидеть рабочий пример здесь