自定义样式剑道垂直菜单角度？

Question

我在当前的 Angular 项目中使用 Kendo UI 组件。

在Vertical Menu 中，我无法在其他级别（子级）上更改样式。

如何更改菜单的父子样式？

有人有什么想法吗？

剑道垂直菜单示例链接：

https://www.telerik.com/kendo-angular-ui/components/menus/menu/vertical/

代码示例：

   <kendo-menu [items]="items" [vertical]="true" style="display:inline-block; width: 100%;" >
        </kendo-menu>

Answer 1

您可以创建kendo-menu-item 并对其应用样式。

<kendo-menu (select)="onSelect($event, template)">
     <kendo-menu-item text="Hover me" cssClass="mycustom">
         <kendo-menu-item text="Toggle popup" >
         </kendo-menu-item>
     </kendo-menu-item>
</kendo-menu>

<ng-template #template>
    <p style="margin: 15px;">Hey, it is popup content!</p>
</ng-template>

和样式：

.mycustom:hover{
  background-color: orange;
}
.mycustom{
  background-color: green;
}
.k-animation-container .k-popup{
  background-color: lightyellow;      
}

Please, see stackblitz example.