javascript - 覆盖react-pro-sidebar上的默认悬停

Question

我正在使用react-pro-sidebar为我的项目react web应用程序制作侧边栏。基于模型，侧边栏必须像这样悬停项目。

然后，我使用 styled-component 进行悬停。

const Menuitem = styled(MenuItem)`
    :hover  {
        background-color: #335B8C !important;
        color: white !important;
        border-radius: 8px !important;
        font-weight: bold !important;
    }
`;

我的代码也是这样的。

 <SidebarWrapper>
      <SidebarBrand>
        <img src={Logo} width="150" />
      </SidebarBrand>
      <ProSidebarProvider>
        <Menu
          menuItemStyles={{
            button: ({ level, active, disabled }) => {
              if (level === 0) {
                return {
                  color: disabled ? "#eee" : "#455A64",
                  backgroundColor: active ? "#fff" : undefined,
                };
              }
            },
          }}
        >
          <Menuitem
            routerLink={
              <Link to="/" className="sidebar-link txt-blue-grey-800" />
            }
          >
            <FontAwesomeIcon icon={faHome} />
            Dashboard
          </Menuitem>
          <p
            className="text-uppercase txt-blue-grey-700 text-bold base-sm"
            style={{ marginRight: 5 }}
          >
            Layanan Pasien
          </p>
          <Menuitem
            routerLink={
              <Link to="/antrian-pasien" className="txt-blue-grey-800" />
            }
          >
            <FontAwesomeIcon icon={faHome} />
            Antrian Pasien
          </Menuitem>

但它不影响悬停项目。它仍然是react-sidebar-pro的默认悬停

那么，有什么方法可以覆盖react-sidebar-pro的默认悬停吗？任何帮助将不胜感激。谢谢。

Answer 1

这不是一个理想的解决方案，但我最终降级到 1.0.0-alpha.7 并使用以下代码......

<Sidebar>
  <Menu
    renderMenuItemStyles={() => ({
      '.menu-anchor': {
            backgroundColor: 'red',
            '&:hover': {
              backgroundColor: 'green',
            },
        },
      })}
  >
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>