I need assistance with a small code that includes two buttons. I am trying to change the color of the first button to green when the mouse hovers over it, and the color of the second button to red under the same condition.
Initially, I set the color within the “backgroundColor” property without any issues. However, when I tried to use hexadecimal values like (#43a047), it did not work as expected. How can I resolve this problem?
const useStyles = makeStyles({
button1: {
backgroundColor: "none",
"&:hover": {
backgroundColor: "#43a047",
color: "#e8e4e4",
},
},
button2: {
backgroundColor: "none",
"&:hover": {
backgroundColor: "#e53935",
color: "#e8e4e4",
},
},
});
<ButtonGroup
style={{
maxWidth: "206px",
maxHeight: "40px",
minWidth: "206px",
minHeight: "40px",
}}
aria-label="outlined primary button group"
>
<Button
style={{
maxWidth: "100px",
minWidth: "100px",
}}
className={classes.button}
>
approve
</Button>
<Button
style={{
maxWidth: "100px",
minWidth: "100px",
}}
>
reject
</Button>
</ButtonGroup>