MaterialUI Custom Hover Style
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);
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)'
},
}