React.js 中的 Material UI ListItem 选定样式

Question

I am using material-ui ListItem to show my nav bar items.

I wrote the following CSS code to show styling when each item selected.

<List>
  {routes.map(route => (
    <Link to={route.path} key={route.name} style={{ textDecoration: "none" }}>
      <ListItem button key={route.name} className={classes.listWrap}>
        <ListItemText primary={route.name} className={classes.listItemText} />
      </ListItem>
    </Link>
  ))}
</List>;

CSS

listWrap: {
  "&:hover": {
    border: "1px solid #6c757d",
    color: "black"
  },
  textAlign: "center",
  "&:active": {
    background: "#6c757d",
    color: "black"
  }
}

When I select one ListItem the styling doesn't work

how can we fix?

Answer 1

You can use focus instead of active .

listWrap: {
    "&:hover": {
      border: "1px solid #6c757d",
      color: "black"
    },
    textAlign: "center",
    "&:focus": {
      background: "#6c757d",
      color: "black"
    }
  }