You can use focus instead of active.
listWrap: {
"&:hover": {
border: "1px solid #6c757d",
color: "black"
},
textAlign: "center",
"&:focus": {
background: "#6c757d",
color: "black"
}
}
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?
You can use focus instead of active.
listWrap: {
"&:hover": {
border: "1px solid #6c757d",
color: "black"
},
textAlign: "center",
"&:focus": {
background: "#6c757d",
color: "black"
}
}