Within the material-ui table component, I am dynamically mapping rows and columns. The className
is set to clickableRow
.
The TableRow
also includes a hover options div on the right side:
const generateTableHoverOptions = () => {
if (selected) {
return (
<TableCell className={classes.rightHoverIcon}>
<Icon>expand_more</Icon>
</TableCell>
);
}
return null;
};
I'm trying to change the backgroundColor
of the <TableCell />
with the class rightHoverIcon
when hovering over the clickableRow
. Here's the CSS code I have been using:
.clickableRow: {
'&:hover': {
backgroundColor: theme.palette.background.default,
cursor: 'pointer',
},
'&:hover > .rightHoverIcon': {
backgroundColor: 'red',
},
},
.rightHoverIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: 1,
height: 49,
position: 'absolute',
right: 0,
borderBottomWidth: 1,
borderBottomColor: 'rgba(224, 224, 224, 1)',
},
I've tried different selectors like '&:hover ~ .rightHoverIcon'
and &:hover .rightHoverIcon
, but none seem to work as expected.
If anyone has any insights or solutions to offer, please share! Thanks!