如何映射数组对象中的MUI 5图标并修改选中项图标颜色？

下面提供三种可行的解决方法，你可以根据现有代码结构选择：

方案一：改造路由配置，传递图标组件而非实例 #

修改routes.tsx中的图标配置，从渲染好的元素改为组件本身，这样就能在Sidebar中动态传递颜色属性：

routes.tsx 修改后

export const SIDEBAR_PATHS = [
  {
    id: 1,
    path: PATHS.projects,
    name: 'Projects',
    icon: AccountTreeIcon, // 仅传递组件，不渲染
  },
  {
    id: 2,
    path: PATHS.faces,
    name: 'Faces',
    icon: FaceRetouchingNaturalIcon,
  },
];

Sidebar.tsx 修改后

{SIDEBAR_PATHS.map(({ id, path, name, icon: Icon }) => {
  const isSelected = path === pathname;
  return (
    <ListItem key={id} disablePadding>
      <ListItemButton 
        disableRipple 
        onClick={() => navigate(path)} 
        selected={isSelected}
      >
        {/* 根据选中状态设置图标颜色 */}
        <Icon color={isSelected ? "primary" : "inherit"} />
        <ListItemText 
          primary={name} 
          primaryTypographyProps={{ fontWeight: 500 }} 
        />
      </ListItemButton>
    </ListItem>
  );
})}

方案二：用React.cloneElement修改已有图标属性 #

如果不想改动路由配置，可以通过React.cloneElement给已渲染的图标添加颜色属性：

Sidebar.tsx 修改后

import React from 'react';

{SIDEBAR_PATHS.map(({ id, path, name, icon }) => {
  const isSelected = path === pathname;
  // 克隆图标并传入颜色props
  const coloredIcon = React.cloneElement(icon, {
    color: isSelected ? "primary" : "inherit"
  });
  
  return (
    <ListItem key={id} disablePadding>
      <ListItemButton 
        disableRipple 
        onClick={() => navigate(path)} 
        selected={isSelected}
      >
        {coloredIcon}
        <ListItemText 
          primary={name} 
          primaryTypographyProps={{ fontWeight: 500 }} 
        />
      </ListItemButton>
    </ListItem>
  );
})}

方案三：通过CSS选择器控制样式 #

利用MUI的sx属性，通过父元素的选中状态直接修改图标颜色，无需改动图标本身：

Sidebar.tsx 修改后

{SIDEBAR_PATHS.map(({ id, path, name, icon }) => (
  <ListItem key={id} disablePadding>
    <ListItemButton 
      disableRipple 
      onClick={() => navigate(path)} 
      selected={path === pathname}
      sx={{
        // 选中状态下，修改内部图标的颜色
        '&.Mui-selected .MuiSvgIcon-root': {
          color: 'primary.main',
        }
      }}
    >
      {icon}
      <ListItemText 
        primary={name} 
        primaryTypographyProps={{ fontWeight: 500 }} 
      />
    </ListItemButton>
  </ListItem>
))}

说明 #

• 方案一灵活性最高，后续可以给图标传递更多自定义属性；
• 方案二适合需要保留原有路由结构的场景；
• 方案三纯样式层面解决，代码改动最小。

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