Reactjs 更改反应材质UI ListItemIcon中的颜色

我正在尝试listitem图标红色，但不知道如何使其变为红色

我对reactJS和材质UI图标非常陌生

这是我的按钮：

    <ListItem button>
      <ListItemIcon>
        <ShoppingCartIcon />
      </ListItemIcon>
      <ListItemText primary="Orders" />
    </ListItem>

---

有人能帮我把图标变成红色吗？

根据文档，你可以用class对象prop的规则名覆盖组件的样式

以下是一个例子的答案：

`const styles=theme=>({
根目录：{
宽度：“100%”，
最大宽度：360
},
图标：{
颜色：“红色”，
}
});
导出默认功能列表（道具）{
常量{classes}=props；
返回(
);
}`

还有一个关于它的例子（类名使用相关）

`const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360
  },
  icon: {
    color: 'red',
  }
});
export default function List(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <List component="nav">
        <ListItem button>
          <ListItemIcon className={classes.icon}>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </ListItem>
      </List>
    </div>
  );
}`