PrimeReact框架Menubar组件菜单项悬停背景色修改异常问题

问题根因 #

PrimeReact Menubar组件的菜单项交互背景默认绑定在.p-menuitem-content子元素上，而非你修改的.p-menuitem父元素。父元素的背景仅会在padding区域显示，因此会出现只有边角变色、主体区域无效果的问题。

修复代码 #

替换原有CSS中菜单项相关样式为以下内容即可：

/*Menubar整体背景*/
.p-menubar {
    background-color: var(--primary) !important;
}
/*一级菜单项默认背景*/
.p-menubar > .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
    background-color: var(--primary) !important;
}
/*一级菜单项悬停背景*/
.p-menubar > .p-menubar-root-list > .p-menuitem > .p-menuitem-content:hover {
    background-color: #000 !important;
}
/*下拉子菜单容器背景*/
.p-menubar .p-submenu-list {
    background-color: var(--primary) !important;
}
/*子菜单项默认背景*/
.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content {
    background-color: var(--primary) !important;
}
/*子菜单项悬停背景*/
.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content:hover {
    background-color: #000 !important;
}
/*菜单项文字、图标颜色*/
.p-menuitem-text, .p-menuitem-icon, .p-submenu-icon {
    color: var(--text-primary) !important;
}

注意事项 #

• 若你的项目使用了scoped样式（Vue单文件组件、React CSS Modules等），需要添加深度选择器穿透组件样式封装：
  • Vue2/Vue3: 在选择器前加:deep()，例如:deep(.p-menuitem-content)
  • React CSS Modules: 用:global()包裹类名，例如:global(.p-menuitem-content)
• 原有代码中.p-menu-list:hover、.p-menuitem:hover属于无效样式，可以直接删除。

内容的提问来源于stack exchange，提问作者Martin Perussini