Reactjs Ant-Design Menu - 更改子菜单外观答案

【问题标题】：Reactjs Ant-Design Menu - change subMenu appearanceReactjs Ant-Design Menu - 更改子菜单外观
【发布时间】：2019-01-31 00:24:08
【问题描述】：

我正在开发一个 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>

【问题讨论】：

标签： javascript css reactjs right-to-left

【解决方案1】：

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

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

【讨论】：

这不会发生！ ://
这很奇怪！您的代码在这里可以正常工作，但是当我添加style 并将模式更改为vertical-right 时，我看不到代码中的相同变化。我以为问题出在Layout 内容中，但也不是。

【解决方案2】：

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

你试过vertical-right模式吗？我无法真正尝试，但也许这就是您正在寻找的......

【讨论】：

由于我的布局是 RTL 并且菜单在网页的最右侧，因此右侧没有空间。但它仍然在右侧打开并隐藏在滚动条后面！
我也试过'vertical-right'，但这不是我想要的。它在折叠菜单框时显示子菜单项。
这很奇怪，因为对我来说，它有效。你能重现这个问题吗？或者分享你的代码？
我刚刚编辑了问题并添加了代码，但是这是在antd中添加菜单的常用方法。

【解决方案3】：

您可以在菜单组件上使用ConfigProvider：

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

【讨论】：