MUI - TableRow hover gets overriden by TableCell background col

Question

I'm using @mui/material: ^5.10.1.

I'm trying to apply the TableRow hover behavior as defined in the Docs. the problem is that I have also defined a background color for each first TableCell in all rows, and that background color overrides the TableRow hover color.

I've considered adding '&hover' to that specific TableCell, but that doesn't solve the issue, the cell gets the same background color only when the user hovers on it. I need that the TableCell gets the same color of the row when the user hover on any cell of that row.

Hope that anyone can help me with this issue. Thanks in advance.

Code below:

   <TableContainer
      sx={{
        overflowX: "auto",
        overflowY: "hidden",
        width: "100%"
      }}
    >
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell
              sx={{ position: "sticky", left: 0, background: "#FFFFFF" }}
            >
              Dessert
            </TableCell>
            <TableCell sx={{ minWidth: 150 }}>Calories</TableCell>
            <TableCell sx={{ minWidth: 150 }}>Fat&nbsp;(g)</TableCell>
            <TableCell sx={{ minWidth: 150 }}>Carbs&nbsp;(g)</TableCell>
            <TableCell sx={{ minWidth: 150 }}>Protein&nbsp;(g)</TableCell>
            <TableCell sx={{ minWidth: 150 }}>More Stuff</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow hover key={row.name}>
              <TableCell
                sx={{
                  background: "yellow",
                  position: "sticky",
                  left: 0,
                  zIndex: 100,
                  width: 200,
                  "&:hover": {
                    background: "#F6F6F6"
                  }
                }}
              >
                {row.name}
              </TableCell>
              <TableCell sx={{ minWidth: 150 }}>{row.calories}</TableCell>
              <TableCell sx={{ minWidth: 150 }}>{row.fat}</TableCell>
              <TableCell sx={{ minWidth: 150 }}>{row.carbs}</TableCell>
              <TableCell sx={{ minWidth: 150 }}>{row.protein}</TableCell>
              <TableCell sx={{ minWidth: 150 }}>{row.moreStuff}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

Code Sandbox here: https://codesandbox.io/s/mui-row-hover-issue-7zp9yl?file=/demo.tsx:1013-2749

I'm trying to apply the same color on all the cells that are contained in the row that receives the mouse hover.

Answer 1

If I'm understanding what you want correctly, you can add the styling selector to the TableBody's TableRow element (and remove your TableCell background changes), like so:

<TableRow
  hover
  key={row.name}
  sx={{
    "&:not(:hover) td:first-of-type": {
      background: "yellow"
    }
  }}
>

This is essentially saying: Select the first td in each row and give it a background, but only if the row is not hovered.

Working CodeSandbox: https://codesandbox.io/s/mui-row-hover-issue-forked-hcx7sh?file=/demo.tsx:1860-2078