overriding default hover on react-pro-sidebar

Question

I'm working with react-pro-sidebar for making a sidebar for my project react web app. Based on mockup, sidebar must hover item like this.

Then, I'm using styled-component for hovering.

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

and also my code goes like this.

 <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>

But it doesn't affect hovering item. It's still default hover by react-sidebar-pro

So, is there any way for overriding default hover for react-sidebar-pro ? Any help will be appreciated. Thank you.

Answer 1

Not an ideal solution but I eventually downgraded to 1.0.0-alpha.7 and used the following code instead...

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