【问题标题】: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>
      );
    }
    

    这是一个关于它的articleclassName 使用相关)。

    【讨论】:

      【解决方案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,
              },
            },
          },
        })
        

        【讨论】:

          猜你喜欢
          • 2020-02-27
          • 2017-01-14
          • 1970-01-01
          • 2020-07-04
          • 2020-12-24
          • 1970-01-01
          • 1970-01-01
          • 2018-05-11
          • 2018-04-28
          相关资源
          最近更新 更多