React：修改作为Props传入的图标尺寸

核心原因 #

之前修改父元素尺寸无效，是因为MUI的图标组件（如SvgIcon）默认自带固定宽高样式，不会继承父元素的尺寸设置，必须直接覆盖图标元素本身的样式。

方法一：用sx属性直接穿透样式 #

在自定义的MenuItem组件中，通过CSS选择器直接选中内部的图标元素，统一设置宽高：

import MenuItem from '@mui/material/MenuItem';

const CustomMenuItem = ({ data, ...props }) => {
  return (
    <MenuItem
      sx={{
        // 选中所有子级svg元素（MUI图标本质是svg）
        '& svg': {
          width: 28, // 自定义宽度
          height: 28, // 自定义高度
          marginRight: 1.5, // 可选：调整图标与文字的间距
        }
      }}
      {...props}
    >
      {data.icon}
      {data.label}
    </MenuItem>
  );
};

方法二：用styled封装可复用的MenuItem #

如果需要在多个地方复用这个带统一图标尺寸的MenuItem，用MUI的styled工具封装更高效：

import { styled } from '@mui/material/styles';
import MenuItem from '@mui/material/MenuItem';

// 封装带统一图标样式的MenuItem
const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
  '& svg': {
    // 用主题间距值，适配全局设计规范
    width: theme.spacing(3.5),
    height: theme.spacing(3.5),
    color: theme.palette.text.secondary, // 可选：统一图标颜色
  },
}));

// 使用示例
const CustomMenuItem = ({ data }) => {
  return (
    <StyledMenuItem>
      {data.icon}
      {data.label}
    </StyledMenuItem>
  );
};

方法三：针对非svg图标兼容（如自定义图标组件） #

如果传入的图标是自定义组件而非MUI原生SvgIcon，可通过类名选择器或直接给图标套一层容器控制尺寸：

const CustomMenuItem = ({ data }) => {
  return (
    <MenuItem sx={{ '.custom-icon': { width: 24, height: 24 } }}>
      {/* 给外部传入的图标添加统一类名 */}
      <span className="custom-icon">{data.icon}</span>
      {data.label}
    </MenuItem>
  );
};

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