PrimeReact：悬停时更改菜单栏项目的背景颜色

Question

悬停时无法更改菜单项颜色 如您所见，当鼠标悬停时，颜色仅显示在角落，而不显示在实际项目上。

这是我的css代码：

/*Menubar*/
.p-menubar {
    background-color: var(--primary) !important;
}
.p-menu-list {
    background-color: var(--primary) !important;
}
.p-menuitem {
    background-color: var(--primary) !important;
}
.p-menu-list:hover {
    background-color: #000 !important;
}
.p-menuitem:hover {
    background-color: #000 !important;
}
.p-menuitem-text, .p-menuitem-icon, .p-submenu-icon {
    color: var(--text-primary) !important;
}

Answer 1

如果我理解正确，你需要这个

.p-menuitem-active a {
    background: #000 !important;
}

或者这取决于你是否想要 hover 或展开

.p-menuitem-link:hover {
    background-color: #000 !important;
}