I am having trouble passing margin using mui styles to my components. Other styles are being passed just fine however when I try margins they do not seem to be applied to my site.

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

This is the definition before my function. Inside my function I have definted classes the following way.

const classes = useStyles();

Inside my main component i added

className={classes.root}

and it works just fine, so I know the issue is not styles hook. However the issue is that the same logic is not working for the button component. When I try doing the margins are not being applied.

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

When i try to replace the styles hook declared earlier it is working just fine.

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

Can anyone spot the mistake I am making? I have done tons of research and I am stuck with debugging this. It is very inefficient to use inline styling to create margins for my whole project.

Thank you