当我们在 React 中使用 Material-UI 单击它时，如何更改侧边栏菜单项的颜色？

Question

我是该框架的新手，我的目标是在单击侧栏中的菜单项之一时显示颜色。 如果我们点击表格组件，表格名称和图标应该变成白色。 任何人都可以帮助我如何在单击菜单项时更改颜色？

这是代码：

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0
    };
  }

  handleListItemClick = (event, index) => {
    this.setState({
      selectedIndex: index
    });
  };

  render() {
    const { className, classes, onSidebarOpen, ...rest } = this.props;
    return (
      <div className={classes.root}>
        <Drawer
          className={classes.drawer}
          variant="permanent"
          classes={{
            paper: classes.drawerPaper
          }}
        >
          <div className={classes.toolbar} />
          <List>
            {["table", "organisation"].map((item, index) => {
              const Icon = itemsConfig[item].icon;
              return (
                <ListItem
                  component={Link}
                  to={itemsConfig[item].link}
                  selected={index === this.state.selectedIndex}
                  onClick={event => this.handleListItemClick(event, index)}
                  button
                  key={item}
                >
                  <ListItemIcon>
                    <Icon />
                  </ListItemIcon>
                  <ListItemText primary={itemsConfig[item].text} />
                </ListItem>
              );
            })}
          </List>
        </Drawer>
      </div>
    );
  }
}

export default withStyles(styles)(Sidebar);

Answer 1

实现：当点击标签时：

• 将背景更改为灰色
• 将图标更改为白色

---

根据the state of the selected index设置条件样式就可以了。

<ListItem
  ...
  style={
    selectedIndex === index ? { backgroundColor: "grey" } : {}
  }
>
  <ListItemIcon>
    <Icon
      style={selectedIndex === index ? { color: "white" } : {}}
    />
  </ListItemIcon>
  <ListItemText primary={itemsConfig[item].text} />
</ListItem>