Tengo este pequeño código y tengo dos botones y quiero que el color del primer botón se vuelva verde cuando apunte el mouse hacia él y el color del segundo botón se vuelva rojo cuando apunte el mouse hacia él.
Pero cuando puse el nombre del color dentro del “backgroundColor” no encontré ningún problema en el código, pero cuando puse “hex like (#43a047)” no funcionó, ¿cómo puedo solucionar el problema?
const useStyles = makeStyles({ button1: { backgroundColor: "none", "&:hover": { backgroundColor: "#43a047", color: "#e8e4e4", }, }, button2: { backgroundColor: "none", "&:hover": { backgroundColor: "#e53935", color: "#e8e4e4", }, }, }); <ButtonGroup style={{ // color: "#f8f4fc", // backgroundColor: "#282c3c", maxWidth: "206px", maxHeight: "40px", minWidth: "206px", minHeight: "40px", // marginRight: 10, }} 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>En className={classes.button} tienes que usar el mismo nombre que tienes en makeStyles .
El problema es que has escrito mal la propiedad CSS. Pones backgroundColor: "#43a047"; y se supone que es background-color: #43a047;
No estoy 100% seguro de cómo se transformará esto a CSS, pero en las reglas de CSS, el nombre de ese parámetro es "background-color", no el equivalente de JS "backgroundColor"