I'm facing an issue where I need to set up a conditional style and a hover effect for TableRows. They work fine individually, but when combined, the hover function stops working.
CSS
const StyledTableRow = withStyles((theme) => ({
root: {
tableRow: {
"&$hover:hover": {
backgroundColor: "blue"
}
},
},
}))(TableRow);
JSX
<TableBody>
{RankingData.map((row) => (
<StyledTableRow hover
className={classes.tableRow}
key={row.name}
style ={(
row.remaining === "2" ||
row.remaining === "1" )
? { background : " #ffff66" }:{ background : "
#ff9999" }}>
<StyledTableCell align="right" size= 'small'>{row.starters}
</StyledTableCell>
<StyledTableCell align="right" size= 'small'>{row.remaining}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
Can someone provide guidance on how to make both the conditional styling and hovering work together?
Appreciate any help in advance!