Reactjs 当用户位于某个组件时，如何将按钮或图标颜色设置为不同的颜色？

我这里有抽屉按钮，当用户点击每个按钮并停留在那里时，我想改变图标的颜色。例如，如果用户单击“Dashboard”并停留在该组件中，则Dashboard按钮的颜色将为白色，以便按钮指示用户在网站中的位置

 const drawer = (
    <div>
      <Button
        variant='contained'
        color='secondary'
        onClick={handleToDashboard}
        className={classes.customButton}
        startIcon={<DashboardIcon style={{ color: 'black' }} />}
      >
        Dashboard
      </Button>
      <Button
        variant='contained'
        color='secondary'
        onClick={handleToTest}
        className={classes.customButton}
        startIcon={<MapIcon />}
      >
       Map
      </Button>
      <Divider />
    </div>
  );

const抽屉=(
仪表板
地图
);

如果此组件是自包含的–也就是说，每当用户单击按钮时，它不会加载新路由，而是保留在现有页面上–您应该维护状态（如果这是类组件，则使用

设置状态

，或者使用功能组件的

使用状态

挂钩）它跟踪最后按下的按钮。您可以更新

onClick

回调中的状态，然后使颜色道具有条件-例如：

<Button
    variant='contained'
    color={this.state.opened === 'map' ? 'white' : 'secondary'}
    onClick={handleToTest}
    className={classes.customButton}
    startIcon={<MapIcon />}
>

如果这是处理页面间路由的导航栏的一部分，那么您应该将抽屉中应高亮显示的值作为道具从显示的任何组件传递。因此，例如，仪表板组件可以，如果它有这个抽屉作为一个孩子，传递一个道具，告诉抽屉它应该将仪表板按钮呈现为白色