我使用material-ui的菜单和菜单项构建了一个选择下拉菜单,但我发现有一件事很奇怪:下拉菜单始终扩展到框的左侧,如下图所示:
我尝试在<MenuItem>
中使用alignItems
属性,但没有成功。
我的代码如下所示。有人能帮我解决这个问题吗?我真的很感谢你的帮助!
<Menu
id="order-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
{options.map((option, index) => (
<MenuItem
key={option}
selected={index === selectedIndex}
onClick={(event) => handleMenuItemClick(event, index)}
>
{option}
</MenuItem>
))}
</Menu>
4条答案
按热度按时间wnvonmuf1#
控制此操作的默认样式位于
ListItem
中,其中指定了justifyContent:“灵活启动”。您可以将其更改为右对齐:
下面是一个完整的工作示例:
相关文件:
klsxnrf12#
更灵活地解决您的问题,
在
<MenuItem>
中使用<ListItemText>
这样你就可以对元素的一部分设置样式。例如:shortcut hint on the right。
nue99wik3#
您可以使用以下代码对齐菜单
示例
nfg76nw04#
MUI5可以使用SX。