更改反应材质 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>
  );
}

这是一篇关于它的文章className（与使用相关）。