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