在反应材料 UI ListItemIcon 中更改颜色答案

【问题标题】：Change Color in react material UI ListItemIcon在反应材料 UI ListItemIcon 中更改颜色
【发布时间】：2019-11-03 18:01:36
【问题描述】：

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

我对 reactJS 和 Material UI 图标很陌生

这是我的按钮：

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

谁能帮我把图标变成红色？

【问题讨论】：

标签： reactjs material-ui

【解决方案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 使用相关）。

【讨论】：

【解决方案2】：

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

下面是一个例子的答案： https://github.com/mui-org/material-ui/issues/12023

【讨论】：

【解决方案3】：

const useStyles = makeStyles({
 listItem: {
    '&:hover': {
      backgroundColor: theme.palette.primary.light,
      color: theme.palette.primary.main,
      '& .MuiListItemIcon-root': {
        color: theme.palette.primary.main,
      },
    },
  },
})

【讨论】：