How can I put a hover on this Button Style? - reactjs

Question

These are my codes for the Button. Somehow, background color only works if I do declare the style in the Button itself. Stating the background color in the const useStyles does not work, hence, I only did this. How can I code this where the background color changes when it hover on it?
<Button
variant="contained"
{...otherProps}
className={classes.margin}
style={{ backgroundColor: " #e31837" }}
>
{children}
</Button>

Answer 1

you can use the root property to change your button style (docs), and also change its background on hover:
const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'blue'
}
}
}));
<Button
variant="contained"
{...otherProps}
className={classes.root}
style={{ backgroundColor: " #e31837" }}
>
{children}
</Button>

Answer 2

You can add this to the styles:
'&:hover': {
backgroundColor: ‘red’
}

Answer 3

<Button
variant="contained"
{...otherProps}
className={classes.margin}
onMouseOver={this.toggleHover}
onMouseOut={this.toggleHover}
style={btnStyle}
>
{children}
</Button>
Then add a toggleHover function
toggleHover(){
this.setState({hover: !this.state.hover})
}
Finally on your render function set your style as a variable
let btnStyle = {'backgroundColor: #e31837'};
if (this.state.hover) {
btnStyle = {'backgroundColor: #000000'}
}

Answer 4

You can refer the following code snippet
import React from 'react';
import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import { green, purple } from '#material-ui/core/colors';
const ColorButton = withStyles((theme) => ({
root: {
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[500],
'&:hover': {
backgroundColor: purple[700],
},
},
}))(Button);
export default function CustomizedButtons() {
const classes = useStyles();
return (
<div>
<ColorButton variant="contained" color="primary" className={classes.margin}>
Custom CSS
</ColorButton>
</div>
)
}