Как изменить цвет элемента меню боковой панели, когда мы щелкаем по нему с Material-UI в React?

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>