How to change the hover color of Material-UI table?

Question

I am using React and Material UI for my web application. I want to change the hover color of table row but cannot do that.

Sample code:

x={
  hover:{
    color:'green'
  }
}

<TableRow
  hover
  key={lead.id} className={classes.row}
  classes={{
    hover:x.hover
  }}
  onClick={() => {}}
>

Answer 1

I've got this solution so far. Maybe there are other approaches to override css of tableRow but this one works like a charm:

const styles = theme => ({
tableRow: {
    "&:hover": {
      backgroundColor: "blue !important"
    }
  }
});


<TableRow hover
      key={lead.id} className={classes.tableRow}

      onClick={() => {}}>

Feel free to ask any question.

Answer 2

tableRow: {
    hover: {
        "&$hover:hover": {
            backgroundColor: '#49bb7b',
        },
    },
}

<TableRow className={classes.tableRow} key={n.id} hover onClick={event => this.handleClick(event)}>Text</TableRow>