reactjs, antd - how to change 'subMenu' title's style( - backgroundColor)?

user_10843638 0
Viewed 459

I am using Menu component, (https://ant.design/components/menu/#Menu) and within in SubMenu component.

and the code is something like -

 <Menu mode="inline" openKeys={["0", "1", "2"]} expandIcon={<></>}>
        {array.map((item, index) => (
            <SubMenu
              key={index}
              title={"temp title"}
              mode="vertical"
            >
              <Menu.Item key={`index${index}`}>
              "first menu item"
              </Menu.Item>
        </SubMenu>
        }

I want to change the title's style of the SubMenu so that it's background color will be blue. I've tried using

tabStyleActive or tabStyle but nothing worked.

also I couldn't find anything in the documentation.

I'd appreciate any help!

antd reactjs
2 Answers

Try this.

  .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
color: blue;}
user_115467080

I found out a way to do it by injecting css directly to the apge using 'styled' function -

const SubMenu = styled(AntdSubMenu)`
  &.ant-menu-submenu-active .ant-menu-submenu-title {
    background-color: ${BLUE_DARK};
    .ant-typography {
      color: WHITE;
    }
  }
user_108436380
Related