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

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

• javascript
• reactjs
• react-hooks
• web-frontend
• react-sidebar

3 Answers 3

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>

         <Menu
          menuItemStyles={{
            button: ({ level, active, disabled }) => {
              if (level === 0) {
                return {
                  color: disabled ? "#eee" : "#455A64",
                  backgroundColor: active ? "#fff" : undefined,
                  "&:hover": {
                     backgroundColor: "#335B8C !important",
                     color: "white !important",
                     borderRadius: "8px !important",
                     fontWeight: "bold !important"
                   },
                };
              }
            },
          }}
        >

The button element inside the Menu Component should be used to give the intended hovering effect.

   <Sidebar>
    <Menu
      button: {
        '&:hover': {
           backgroundColor: #335B8C !important;
           color: white !important;
           borderRadius: 8px !important;
           fontWeight: bold !important;
        }
     }
   >
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>