the styling rules inside my makeStyle Materiel UI not working - reactjs

Question

I want to apply the field class on the TextField Components. but the margins do not apply.
My code is like below:
import React from 'react';
import { Typography, Button, Container, TextField } from '#mui/material';
import SendIcon from '#mui/icons-material/Send';
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
field : {
marginTop: 20,
marginBottom: 20,
display: 'block'
}
});
export default function Create() {
const classes = useStyles();
return (
<Container>
<Typography
variant="h6"
component="h2"
color="textSecondary"
gutterBottom
>
Create new page
</Typography>
<form noValidate autoComplete='off'>
<TextField
className={classes.field}
label='Note title'
variant='outlined'
color='secondary'
fullWidth
required
/>
<TextField
className={classes.field}
label='Note Details'
variant='outlined'
color='secondary'
fullWidth
multiline
rows={4}
required
/>
</form>
<Button
type = 'sybmit'
variant = 'contained'
color = 'secondary'
endIcon = {<SendIcon />}
>
Submit
</Button>
</Container>
)
}

Answer 1

On v5 MUI deprecated the #mui/styles styling solutions. On the documentation, they put this message,
⚠️ #mui/styles is the legacy styling solution for MUI. It is deprecated in v5. It depends on JSS as a styling solution, which is not used in the #mui/material anymore. If you don't want to have both emotion & JSS in your bundle, please refer to the #mui/system documentation which is the recommended alternative.
And here is their new solution for styling components - https://mui.com/system/styled/