add border when mouse hovered on MUI v5 table row-CodePudding

I created a table with Material UI v5 and now when the mouse pointer hovered on the table row I want to add a blue border to the table row.

I have tried a lot of ways and searched but I did not find any solution.

this is what I made so far:

codesandbox

CodePudding user response：

You can check the online example here: https://codesandbox.io/s/reverent-faraday-6jb5yt

I did this:

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover
  },
  "&:last-child td, &:last-child th": {
    border: 0
  },
  '&:hover': {
    border: '3px solid blue'
  },
  [`&.${tableRowClasses.root}`]: {
    borderRadius: "100px"
  }
}));

Specifically, including on StyledTableRow these lines:

  '&:hover': {
    border: '3px solid blue'
  },