Tengo problemas para pasar el margen usando estilos mui a mis componentes. Otros estilos se pasan bien, sin embargo, cuando pruebo los márgenes, parece que no se aplican a mi sitio.

 const useStyles = makeStyles({ tool: { width:'100%', display: 'inline-flex', justifyContent: 'space-between', }, lastBtn: { marginLeft: 10, marginRight: 50, } })

Esta es la definición antes de mi función. Dentro de mi función he definido las clases de la siguiente manera.

 const classes = useStyles();

Dentro de mi componente principal agregué

 className={classes.root}

y funciona bien, así que sé que el problema no es el gancho de estilos. Sin embargo, el problema es que la misma lógica no funciona para el componente del botón. Cuando intento hacer los márgenes no se están aplicando.

 <Button className={classes.lastBtn} variant='contained' size='large' onClick={() => navigate("/register")} > Register </Button>

Cuando trato de reemplazar el gancho de estilos declarado anteriormente, funciona bien.

 style={{ marginLeft: 10, marginRight: 50}}

¿Alguien puede detectar el error que estoy cometiendo? He investigado mucho y estoy atascado con la depuración de esto. Es muy ineficiente usar estilos en línea para crear márgenes para todo mi proyecto.

Gracias