Nunca usé un <Fab /> antes, pero estoy confundido sobre cómo agregar una opción de desplazamiento que cambia el color de los botones. Hasta ahora tengo esto:
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; }si agrego una nueva función css que cambia el color de desplazamiento, borra los otros estilos del botón y vuelve al valor predeterminado
<Fab /> viene con un color flotante basado en el accesorio de color .
Si desea anular el color, puede usar el accesorio sx .
<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