PrimeNG Menubar：如何分别自定义主菜单项与子菜单项样式？

方法1：利用模板上下文变量区分主/子菜单 #

PrimeNG的Menubar菜单项模板自带root上下文变量，可直接标记当前项是否为顶级主菜单项，通过这个变量动态设置样式即可：

<p-menubar [model]="menuItems">
    <ng-template pTemplate="item" let-item let-root="root">
        <p 
            [style.color]="root ? 'white' : '#333'" 
            style="padding: 0 10px"
        >
            {{ item.label }}
        </p>
    </ng-template>
</p-menubar>

• 当root为true时，应用白色文字适配主菜单蓝色背景
• 当root为false时，应用深色文字适配子菜单白色背景

方法2：通过CSS层级选择器精准定位 #

如果不想修改模板逻辑，也可以用CSS选择器区分主/子菜单的元素层级，避免样式继承：

/* 仅作用于顶级主菜单项 */
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content p {
  color: white;
  padding: 0 10px;
}

/* 仅作用于嵌套子菜单项 */
.p-menubar .p-submenu-list .p-menuitem-content p {
  color: #333;
  padding: 0 10px;
}

• .p-menubar-root-list是主菜单容器类，通过直接子元素选择器>确保样式只覆盖顶级项
• .p-submenu-list是子菜单容器类，匹配所有嵌套的子菜单项

内容的提问来源于stack exchange，提问作者Alessio Raddi