如何从对象数组映射MUI 5图标并改变其颜色?

Question

我有一个对象数组，基本上是侧边栏项。每个对象都有一个mui5图标。在侧边栏组件中，我将其呈现在地图函数中。我想把选中的项目高亮显示…我设法改变字体的颜色，但不知道如何改变图标的颜色。

所以问题是如何改变图标的颜色在Sidebar.tsx?

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>
))}

Answer 1

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

我会把你的icon字段从JSX类型(已经称为react组件)更改为FC(一个react组件)，这样你就可以稍后调用它并将props传递给它。

然后，根据selected道具调整图标的颜色。

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>
);
})}

Answer 2

对于mui 5，您可以尝试这样做。Mui提供了SvgIcon组件用于相同的目的。

import { SvgIcon } from "@mui/material";
....
{SIDEBAR_PATHS.map(({ id, path, name, icon }) => {
return (
<ListItem key={id} disablePadding>
<ListItemButton disableRipple onClick={() => navigate(path)} selected={path === pathname}>
<SvgIcon style={{ color: path === pathname ? 'green' : 'blue' }}{icon}</SvgIcon>
<ListItemText primary={name} primaryTypographyProps={{ fontWeight: 500 }} />
</ListItemButton>
</ListItem>
);
})}