score:189

Accepted answer

You should define a key for TableRow as a className and then put your hover style right on that class name as an object.

const styles = theme => ({
  ...
  tr: {
    background: "#f1f1f1",
    '&:hover': {
       background: "#f00",
    },
  },
  ...
});

return <TableRow className={props.classes.tr} ...>

In another example it would be something like this:

const styles = {
  tr: {
    background: "#f1f1f1",
    '&:hover': {
      background: "#f00",
    }
  }
};

function Table(props) {
  return (
    <Table>
      <TableRow className={props.classes.tr}>
        {"table row"}
      </TableRow>
    </Table>
  );
}

export default withStyles(styles)(Table);

score:7

If you are looking to make some custom hover animations then you can try this style
This block of code will change the colour of a card on hover.

For more info please check here Transitions in MUI

card : {
    transition: theme.transitions.create(["background", "background-color"], {
      duration: theme.transitions.duration.complex,
    }),
    "&:hover": {
      backgroundColor: "#333",
    },
}

score:7

By Adding A simple Statement you can customize Hover properties..

'&:hover': {
background: "rgb(7, 177, 77, 0.42)",    
             
}

So,

tableWrapper: {
    overflowX: "auto",
  
  hover: {
    "&:hover": {
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    },
}

Related Query

More Query from same tag