reactjs, antd - 如何更改 'subMenu' 标题的样式(- backgroundColor)？

Question

我正在使用菜单组件，(https://ant.design/components/menu/#Menu) 并在 SubMenu 组件中。

代码类似于 -

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

我想更改子菜单的标题样式，使其背景颜色为蓝色。我试过使用

tabStyleActive 或 tabStyle 但没有任何效果。

我在文档中也找不到任何内容。

如有任何帮助，我将不胜感激！

Answer 1

试试这个。

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

Answer 2

我找到了一种方法，使用 'styled' 函数将 css 直接注入到 apge -

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

reactjs, antd - 如何更改 'subMenu' 标题的样式(- backgroundColor)？

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

reactjs

antd