更改React链接中的CSS元素处于活动状态

Question

我要确保如果我的导航链接处于活动状态，请将ListItemIcon元素的颜色更改为蓝色。

      <NavLink to="/dashboard">
        <MenuItem className={classes.menuItem}>
          <ListItemIcon className={classes.icon}>
            <HomeIcon />
          </ListItemIcon>
          <ListItemText
            classes={{ primary: classes.primary }}
            inset
            primary={<FormattedMessage {...messages.dashboardItem} />}
          />
        </MenuItem>
      </NavLink>

Answer 1

对于相对较小的样式更改，您可以仅使用style属性：

  <NavLink to="/dashboard">
    <MenuItem className={classes.menuItem}>
      <ListItemIcon style={{ color: navLinkIsActive ? 'blue' : 'black'}} className={classes.icon}>
        <HomeIcon />
      </ListItemIcon>
      <ListItemText
        classes={{ primary: classes.primary }}
        inset
        primary={<FormattedMessage {...messages.dashboardItem} />}
      />
    </MenuItem>
  </NavLink>