如何覆盖react-pro-sidebar的默认hover样式？

云上老周

2026-8-8

问题原因

react-pro-sidebar的MenuItem组件内部实际渲染的是带有.ps-menu-button类的按钮元素，默认hover样式作用在这个内部按钮上，直接给Menuitem加hover样式无法命中目标元素，导致自定义样式不生效。

解决方案

方案1：修改styled-components选择器，命中内部按钮

调整styled-components的样式，直接选中内部的.ps-menu-button元素并设置hover效果：

const Menuitem = styled(MenuItem)`
  & .ps-menu-button {
    border-radius: 8px;
    transition: all 0.2s ease; // 可选：添加过渡动画提升体验

    &:hover {
      background-color: #335B8C;
      color: white;
      font-weight: bold;
    }
  }
`;

通过后代选择器精准命中目标元素，无需依赖!important即可覆盖默认样式。

方案2：使用官方API（menuItemStyles）配置hover状态

react-pro-sidebar的Menu组件提供了menuItemStyles属性，支持直接根据hover状态配置样式，这是官方推荐的稳妥方案：

<Menu
  menuItemStyles={{
    button: ({ level, active, disabled, hover }) => {
      if (level === 0) {
        return {
          color: hover ? "white" : (disabled ? "#eee" : "#455A64"),
          backgroundColor: hover ? "#335B8C" : (active ? "#fff" : undefined),
          fontWeight: hover ? "bold" : "normal",
          borderRadius: "8px",
        };
      }
    },
  }}
>
  <MenuItem
    routerLink={<Link to="/" className="sidebar-link txt-blue-grey-800" />}
  >
    <FontAwesomeIcon icon={faHome} />
    Dashboard
  </MenuItem>
  {/* 其他菜单项目 */}
</Menu>

无需额外的styled-components包裹，直接通过官方API控制样式，优先级更高，不会被默认样式覆盖。