Question

我正在尝试将Listitem图标设置为红色，但是没有将其设置为红色。

我对ReactJS和Material UI图标非常陌生

这是我的按钮：

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

有人可以帮助我将图标颜色设为红色吗？

Answer 1

根据文档，您可以使用类对象prop的规则名称覆盖组件的样式。

以下是示例答案： https://github.com/mui-org/material-ui/issues/12023

Answer 2

`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（与类名使用相关）。

在反应材质UI ListItemIcon中更改颜色

2 个答案: