I never used a <Fab /> before but I'm confused on how to add a hover option that changes the buttons color. So far i have this:
js:
<Fab variant="extended" className="sidebar__tweet" fullWidth>
<TwitterIcon className= 'sidebar__twitterIcon2' sx={{ mr: 1 }} />
Tweet
</Fab>
css:
sidebar__tweet:
.sidebar__tweet {
background-color: var(--twitter-color) !important;
border: none !important;
color: #444444 !important;
font-weight: 900 !important;
text-transform: inherit !important;
border-radius: 30px !important;
height: 50px !important;
margin-top: 20px !important;
}
sidebar__TweetIcon2:
.sidebar__twitterIcon2 {
color: #444444;
}
if i add a new css function that changes the hover color it errases the other styleings of the button and goes back to default
<Fab /> comes with hover color based on the color prop.
If you want to override the color, you can use the sx prop.
<Fab
color="primary"
aria-label="add"
sx={{
border: '3px solid orange',
":hover": {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
}
}}
>
<TwitterIcon sx={{ mr: 1 }} />
</Fab>
https://codesandbox.io/s/fab-custom-hover-effect-gqhrt?file=/demo.js