Reactjs 如何从一组对象映射 MUI 5 图标并更改其 colored颜色

发布于11月16日

我有一个对象数组，这些对象基本上是侧边栏项目.每个物体都有一个MUI 5图标.在侧边栏组件中，我将其呈现在map函数中.我想要突出显示选定的项目…我设法更改了字体 colored颜色，但不知道如何更改图标 colored颜色 .

因此，问题是如何更改Sidebar.tsx中的图标 colored颜色？

routes.tsx个

export const SIDEBAR_PATHS = [
  {
    id: 1,
    path: PATHS.projects,
    name: 'Projects',
    icon: <AccountTreeIcon />,
  },
  {
    id: 2,
    path: PATHS.faces,
    name: 'Faces',
    icon: <FaceRetouchingNaturalIcon />,
  },
];

Sidebart.tsx个

    {SIDEBAR_PATHS.map(({ id, path, name, icon }) => (
      <ListItem key={id} disablePadding>
        <ListItemButton disableRipple onClick={() => navigate(path)} selected={path === pathname}>
          {icon}
          <ListItemText primary={name} primaryTypographyProps={{ fontWeight: 500 }} />
        </ListItemButton>
      </ListItem>
    ))}

推荐答案

但不知道如何更改图标 colored颜色 .

我会将您的icon字段从JSX类型(已经称为Reaction组件)更改为FC(Reaction组件)，这样您就可以在以后调用它并向其传递props .

然后，只需根据selectedprops 调整图标的 colored颜色即可.

export const SIDEBAR_PATHS = [
  {
    id: 1,
    path: PATHS.projects,
    name: 'Projects',
    icon: AccountTreeIcon
  },
  {
    id: 2,
    path: PATHS.faces,
    name: 'Faces',
    icon: FaceRetouchingNaturalIcon,
  },
];

{SIDEBAR_PATHS.map(({ id, path, name, icon }) => {
  const Icon = icon;      

  return (
    <ListItem key={id} disablePadding>
      <ListItemButton disableRipple onClick={() => navigate(path)} selected={path === pathname}>
        <Icon style={{ color: selected ? 'green' : 'red'} />
              //  ^^^^^^^^^^^^^^^^ toggle the color of icon

        <ListItemText primary={name} primaryTypographyProps={{ fontWeight: 500 }} />
      </ListItemButton>
    </ListItem>
  );
})}