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