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

Question

我正在使用ReactJS和Material UI框架。

这个应用程序同时支持rtl和ltr，而且效果很好。

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

下面是我的演示链接，如果你将变量'DIR‘从ltr改为rtl，你会看到输入是右对齐的，而Name1输入将会在Name2输入的右边(期望的行为)。

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

​

​

Answer 1

看起来你的属性maxWidth="xl"的值是错误的。应该是maxWidth="xs"。查看网格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>

请不要使用网格内部菜单