Greetings everyone,
I need assistance with adding margins above and below a Button element.
Below is the relevant code snippet:
const useStyles = makeStyles(() => ({
progress: {
display: 'block',
margin: 'auto',
},
}));
return (
<Container>
<Typography variant="h3" component="h1" style={{ textAlign: 'center' }}>
Scholarships
</Typography>
<FilterBar changeSortBy={setSortField} changeSortFormat={setSortDir} />
{error?.toString() ||
(loading && <CircularProgress className={classes.progress} />) || (
<ScholarshipList scholarships={scholarships} />
)}
<Button mt={3} mb={3} </Button>
</Container>
);
}
The material-ui documentation provides:
const theme = {
spacing: 8,
}
<Box m={-2} /> // margin: -16px;
Instead of setting custom values, I want to utilize the existing theme defined in
const useStyles = makeStyles (() =>How can I leverage the current theme of the web application to apply 24px margins above and below the button?
I have already included mt={3} and mb={3}. Now, how do I ensure that this results in 24px margins using the themes spacing value of 8?
Thank you!