The implementation of the TableRow component and the customizing components page show that you need to override two classes, root.hover:hover and .hover to change the hover color.
const useStyles = makeStyles((theme) => ({
/* Styles applied to the root element. */
root: {
// Default root styles
color: 'inherit',
display: 'table-row',
verticalAlign: 'middle',
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
'&$hover:hover': {
// Set hover color
backgroundColor: theme.palette.action.hover,
},
},
/* Pseudo-class applied to the root element if `hover={true}`. */
hover: {},
}));
Then in your component, you can apply the styles to the classes prop.
const HelloWorld = () => {
const classes = useStyles();
return (
<TableRow classes={classes}><TableCell></TableCell></TableRow>
);
};