Currently, I am working with React and material-ui to create a menu component. This menu has a list of items, with the last item being unique in terms of styling. I have successfully used the :last-child selector for this purpose, but I am facing an issue when trying to apply a hover effect to this last element.
Here is the styling I am using:
const useStyles = makeStyles((theme) => ({
menu: {
textDecoration: 'none',
color: theme.palette.navy.default,
cursor: 'pointer',
fontWeight: 'bold',
textTransform: 'uppercase',
'&:last-child': {
background: theme.palette.orange.default,
borderRadius: '5em',
color: theme.palette.white.default,
// hover effect not working on the last child item
'&:hover': {
background: theme.palette.green.default,
},
},
},
}));
And here is how the component is implemented:
...
const classes = useStyles();
<MenuList>
{menu.map((item, index) => (
<MenuItem selected={false} key={index} className={classes.menu}>
{item.title}
</MenuItem>
))}
</MenuList>
Any tips on how I can make the hover effect work on the last child item?