Is there a way to change the text color of each row to red when hovering over it in a table? I tried using &:hover with the color property, but it didn't work.
<TableRow
key={row.id}
sx={{
"&:hover": {
color: "red" // not working
}
// "& .MuiTableCell-root:hover":{ // --- on hover only hovered cell text color is changing
// color:"red"
// }
}}
>
<TableCell align="left">{row.category}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">
<IconButton aria-label="delete">
<span className="material-icons-outlined">
delete_forever
</span>
</IconButton>
</TableCell>
</TableRow>
MuiTableCell-root override is done on <TableRow>, but this is affecting only each cell, but not entire row.
I need color to be changed on hovering each row? how to do that?
CodeSandbox Demo.
Solution:
<TableRow
key={row.id}
sx={{
"&:hover .MuiTableCell-root, &:hover .material-icons-outlined": {
color: "red"
}
}}
>