Reactjs Ant-Design菜单-更改子菜单外观

Question

我正在开发一个Reactjs网站，并且正在使用Ant-Design（antd）库。我有一个菜单，我决定使用垂直模式。由于我的网站具有rtl布局，因此我需要在“菜单”框的左侧打开“子菜单”项。我该怎么办？

我已经准备好了我真正想做的事情的图像：

这是我的代码：

<Layout className="SideMenus">
  <Menu mode="vertical" defaultSelectedKeys={['One']}>
  <Menu.Item key="One">One</Menu.Item>
  <Menu.Item key="Two">Two</Menu.Item>
  <SubMenu key="Three" title="Three">
     <Menu.Item key="Option3">Option3</Menu.Item>
     <Menu.Item key="Option4">Option4</Menu.Item>
  </SubMenu>
</Layout>

Answer 1

如果右边没有空格，菜单将在左侧自动打开。

您是否尝试过vertical-right模式？我真的不能尝试，但是也许这就是您想要的...

Answer 2

在菜单级样式中使用向右浮动，它将自动弹出子菜单左侧

<Menu onClick={handleClick} style={{ width: 256 , float : "right"}} mode="vertical">

Answer 3

您可以在 Menu 组件上使用 ConfigProvider：

<ConfigProvider direction="rtl"><Menu /></ConfigProvider>