MaterialUI Custom Hover Style

Question

I'm a newbie here to React and I'm a little bit confused on how to override classes in Material UI. I took a look at the examples and tried to mimic it but it didn't seem to do what I want it to do.

Basically, on a table row hover, I want to make it set a background color different from what it is currently doing.

Here is my approach:

const styles = theme => ({   root: {     width: "100%",     marginTop: theme.spacing.unit * 3   },   table: {     minWidth: 1020   },   tableWrapper: {     overflowX: "auto"   },   hover: {     "&:hover": {       backgroundColor: 'rgb(7, 177, 77, 0.42)'     }   } });  return <TableRow hover classes={{hover: classes.hover}} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.row_id} selected={isSelected}>      {this.insertRow(n, isSelected, counter, checkbox)} 

;

export default withStyles(styles)(EnhancedTable); 

Thanks for your help!

Answer 1

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",     }, }  

Answer 2

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);