CODEWITHSUNDEEP
cssreactjsmaterial-ui
senad_h
senad_h

Reputation: 23

Material UI ListItem Selected Styling in React.js

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?

Upvotes: 0

Views: 2440

Answers (1)

Jason Jin
Jason Jin

Reputation: 1849

You can use focus instead of active.

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

Upvotes: 2

Related Questions