在 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>