When I put the mouse on the login button, the background color of the button doesn't stay white. How do I stay white? Help me please. I tried that but it didn't work.
<Button
key={item}
sx={{
color: "secondary.contrastText",
backgroundColor: "secondary.light",
"&:hover": {
backgroundColor: "transparent"
}
}}
If you set backgroundColor to transparent that means it will inherit it from the background element. Your background element (i.e., navbar) is orange, that's why the button becomes orange on hover.
This will solve your problem.
<Button
key={item}
sx={{
color: "secondary.contrastText",
backgroundColor: "secondary.light",
"&:hover": {
backgroundColor: "white"
}
}}
size="medium"
>
{item}
</Button>
See the forked snippet.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments