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

Posted 2023-02-22

【中文标题】PrimeReact：悬停时更改菜单栏项目的背景颜色

【英文标题】：PrimeReact: change background color of Menubar items when on hover

【发布时间】：2021-10-25 18:21:09

【问题描述】：

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

这是我的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;

【参考方案1】：

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

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

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

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