I want to change color text of each row eg. red, when hovered on each row of a table. I tried &:hover with color property, but it's not working.

<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.

CodePudding user response：

UPDATED: Do this inside your TableRow

<TableRow
  key={row.id}
  sx={{
    "&:hover .MuiTableCell-root, &:hover .MuiTableCell-root span.material-icons-outlined": {
      color: "red"
    }
  }}
>
  {/* some code */}
</TableRow>

CodePudding user response：

You can do it by

<Table
    sx={{          
      "& .MuiTableCell-root:hover": {
        color: "red"
      }
    }}
    /*...other code is omitted for the brevity*/

or by creating styles:

const styles = theme => ({ 
  tableCell: {
    "$hover:hover &": {
      color: "red"
    }
  },
  hover: {}
});

and then:

<TableCell
    className={classes.tableCell}
    component="th"
    scope="row"
 >
    {row.category}
 </TableCell>

CodePudding user response：

use "&:hover .MuiTableCell-root" with color red