MUI表格行悬停时如何修改整行单元格文字颜色？

需求与问题 #

需要实现鼠标悬停表格某一行时，该行所有单元格的文字变为红色。尝试以下两种方式均未达到预期效果：

• 在<TableRow>的sx属性中使用&:hover设置color属性，无任何效果；
• 使用& .MuiTableCell-root:hover仅能修改当前悬停的单个单元格文字颜色。

原代码示例 #

<TableRow
  key={row.id}
  sx={{
    "&:hover": {
      color: "red" // 未生效
    }
    // "& .MuiTableCell-root:hover":{ // 仅单个悬停单元格变色
    //   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>

解决方案 #

通过在TableRow的sx属性中，针对行悬停状态下的所有MuiTableCell-root元素以及自定义图标类设置文字颜色，即可实现整行文字变红的效果：

<TableRow
 key={row.id}
 sx={{
  "&:hover .MuiTableCell-root, &:hover .material-icons-outlined": {
    color: "red"
  }
 }}
>
  {/* 单元格内容 */}
</TableRow>

内容的提问来源于stack exchange，提问作者ram