reactjs - 更改 react Material UI ListItemIcon 中的颜色

Question

我正在尝试将列表项图标变为红色，但不知道如何将其变为红色。

我对 reactJS 和 Material UI 图标很陌生

这是我的按钮:

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

任何人都可以帮助我如何使图标颜色变红？

Answer 1

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

这是一个 article关于它( className 使用相关)。