I am facing an issue with a Material UI table in React 18 where each cell has a different background color, causing the hover style on the row to break. Despite trying various solutions, I have been unable to find a resolution.
For reference, you can see the desired outcome here:
When hovering over a row in the table, the color should simply darken.
Is there a straightforward way to accomplish this using React and Material UI? How can I ensure that the entire row changes color when hovered over?
While I can set a different color for individual cells when in the hover state from my Cell component, it only applies to single cell hovers, not the entire row.
export const MyCustomCell = (props) => {
const theme = useTheme();
return (
<TableCell
style={{
backgroundColor: getCellBackground(props)
}}
sx={{
"&.MuiTableCell-root:hover": {
backgroundColor: getCellBackgroundOnHover(props)
}
}}
>
{betterTiming(prop)}
</TableCell>
)
}
<TableRow
role="checkbox"
sx={{
'&:last-child td, &:last-child th': {border: 0},
// "&.MuiTableRow-root:hover": {
// backgroundColor: "pink !important"
// }
}}
tabIndex={-1}
>
</TableRow>
EDIT: The color is computed dynamically from props