MaterialUIでTableRowの背景色よりTableCellの背景色が優先されてしまうためTableRowのhover設定が機能しない問題

はじめに

MaterialUIのv4を使っています。
TableRowのhover設定をオンにした場合でも、TableCellの背景色が優先されてしまうため、hoverしても背景色が変わりません。
これを解決しました。

コード

sample.tsx

const useStyles = makeStyles({
  tableRow: {
    '&.MuiTableRow-hover': {
      '&:hover': {
        '& > .MuiTableCell-root': {
          backgroundColor: 'blue'
        }
      }
    }
  },
  tableCell: {
    backgroundColor: 'red'
  }
});

export const Table: React.FC<Props> = () => {
  const classes = useStyles();

  return (
    <Table>
      <TableHead>
        <TableRow>
          <HeaderCell/>
        </TableRow>
      </TableHead>
      <TableBody>
        {rowData.map((row, index) => (
          <TableRow hover key={index} className={classes.tableRow}>
            <TableCell className={classes.tableCell}/>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};