Overriding TableRow hover CSS on Material-ui in React

Question

Been going round in circles on this. Clearly I'm not fully understanding how class overrides work in Material-ui.

I tried this answer: CSS on Material UI components but it didn't work (no errors), perhaps because I'm using a stateful component rather than the stateless one in the example.

Currently I'm trying this...

<TableRow className={styles.tableRow}
    key={n.id} hover
    onClick={event => this.handleRowClick(event, n.id)}
    classes={{ 'hover': {color: '#7EA5FF'}}} >
      <TableCell>&nbsp;</TableCell>
      <TableCell>{n.title}</TableCell>
      <TableCell>{n.author}</TableCell>
</TableRow>

But I get this error: the key hover provided to the classes property is not valid for TableRow. You need to provide a non empty string instead of: [object Object].

Help appreciated. Thanks.

Answer 1

In the code you shared, you have

className={styles.tableRow}

then

classes={{ 'hover': {color: '#7EA5FF'}}

You should put your style modification in the declaration of styles.tableRow and delete the props className because it seems not be in the api. https://material-ui.com/api/table-row/

Something like:

const styles = theme => ({
     tableRow: {
      hover: {
         /// your styles...
        }
     }
});
....

render() {
 // I think you should use the props classes, because it's the name of 
 // the props to get the style from the function HOC withStyles of MUI
 const classes = this.props.classes;
 return (
   <TableRow
    classes={classes.tableRow}
    key={n.id} hover
    onClick={event => this.handleRowClick(event, n.id)}
>
      <TableCell>&nbsp;</TableCell>
      <TableCell>{n.title}</TableCell>
      <TableCell>{n.author}</TableCell>
</TableRow>
 );
}

If you share all the code of your component in a sandbox or something like it I can help you more. I need to see your variable where you declare the style and I need to see how you pass it to the component.

It's because material-ui is based on JSS to style the component. It's a bit disturbing when you are not familiar with it.

Here is a good exemple for your case

https://material-ui.com/demos/tables/#customized-tables

And here is a good documentation about it too

https://material-ui.com/customization/overrides/#overriding-with-classes

Answer 2

const useStyles = makeStyles((theme) => ({
  hover: {
    "&:hover": {
      backgroundColor: "green !important",
    },
  },
}));

 const classes = useStyles();
<TableRow hover classes={{hover: classes.hover,}}/>