如何在 React MUI <Menu /> 组件上制作方向 rtl？

Posted 2023-02-21

【中文标题】如何在 React MUI <Menu /> 组件上制作方向 rtl？

【英文标题】：How to make direction rtl on React MUI <Menu /> component?

【发布时间】：2020-05-17 03:58:24

【问题描述】：

我正在使用带有 Material UI 框架的 ReactJS。

该应用同时支持 rtl 和 ltr，效果很好。

但是，对于和组件，方向似乎始终保持 ltr。 我想这与在 DOM 层次结构中插入“新”组件的位置有关，但我没有设法解决它。

下面是我的演示的链接，如果您将变量“DIR”从 ltr 更改为 rtl，您将看到输入向右对齐，并且 Name1 输入将在 Name2 输入的右侧（所需的行为）。

打开的菜单也会向右对齐，但这不会影响菜单项。我希望看到的不是 hello world icon，而是 world hello icon。

【参考方案1】：

您的属性maxWidth="xl"的值似乎有误。应该是maxWidth="xs"。查看 Grid https://material-ui.com/components/grid/ 的文档。另外，检查依赖关系。这 3 个步骤中似乎缺少某些内容：https://material-ui.com/guides/right-to-left/#opting-out-of-rtl-transformation

<Menu>
  <MenuItem>
     <ListItemIcon>
        <Icon />
     </ListItemIcon>
     <ListItemText primary="Sent mail" />
  </MenuItem>
  ...
</Menu>

请不要在菜单中使用网格

【讨论】：

感谢您的回答。 maxWidth 道具应用于 组件。在这个沙箱中我真的没有按照所有步骤进行操作，使用 ListItem 和 ListIcon 确实解决了问题，谢谢！

@RanST 如果此答案帮助您解决问题。请投票作为答案。我们正在帮助获得积分。谢谢

对我帮助很大，抱歉我忘记了。

我很高兴它有所帮助。谢谢