Material UI React菜单组件图标映射致li对齐异常及Typography映射需求

核心问题分析 #

你代码里的布局错乱是因为在<MenuItem>内部嵌套了<ListItem>——MenuItem本身就是ListItem的封装组件，嵌套会生成多余的<li>标签，破坏Material UI的默认布局结构。另外要把快捷键（Typography）纳入映射，只需扩展数据源结构即可实现统一渲染。

修改后的完整代码 #

IconMenu组件

import Divider from '@mui/material/Divider';
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import Typography from '@mui/material/Typography';
import ContentCut from '@mui/icons-material/ContentCut';
import ContentCopy from '@mui/icons-material/ContentCopy';
import ContentPaste from '@mui/icons-material/ContentPaste';
import Cloud from '@mui/icons-material/Cloud';

export const IconMenu = ({menuicons}) => {
  return (
    <Paper sx={{ width: 320, maxWidth: '100%' }}>
      <MenuList>
        {/* 循环生成每个MenuItem，和手写项结构一致 */}
        {menuicons.map((item, index) => (
          <MenuItem key={index}>
            <ListItemIcon>{item.icon}</ListItemIcon>
            <ListItemText>{item.label}</ListItemText>
            {item.shortcut && (
              <Typography variant="body2" color="text.secondary">
                {item.shortcut}
              </Typography>
            )}
          </MenuItem>
        ))}
        
        {/* 原手写的Copy项可保留，也可加入menuicons统一管理 */}
        <MenuItem>
          <ListItemIcon>
            <ContentCopy fontSize="small" />
          </ListItemIcon>
          <ListItemText>Copy</ListItemText>
          <Typography variant="body2" color="text.secondary">
            ⌘C
          </Typography>
        </MenuItem>
        
        <Divider />
        <MenuItem>
          <ListItemIcon>
            <Cloud fontSize="small" />
          </ListItemIcon>
          <ListItemText>Web Clipboard</ListItemText>
        </MenuItem>
      </MenuList>
    </Paper>
  );
}

Stories.js 数据源

menuicons: [{ 
  icon: <ContentCut fontSize="small" />, 
  label: "Cut", 
  path: '/',
  shortcut: "⌘X" // 新增快捷键字段
}]

修改说明 #

1. 移除嵌套ListItem：直接在MenuItem内部放置ListItemIcon、ListItemText和Typography，保持和手写MenuItem一致的结构，避免多余li标签干扰布局。
2. 扩展数据源：给menuicons数组的每一项增加shortcut字段，实现快捷键的统一映射渲染。
3. 循环层级调整：把map循环移到MenuList下，每个menuicons项对应独立的MenuItem，确保整体布局和手写项对齐。

内容的提问来源于stack exchange，提问作者user3448925