Margin not working in TextField using MUI makeStyles - reactjs

Question

I am trying to add margin to my TextField component by making an object of makestyles using MUI v5.
The background color is reflecting in the component but not margin and padding. Here is my code
import React, { useState } from 'react'
import { Typography } from '#mui/material'
import { Button } from '#mui/material'
import { ButtonGroup } from '#mui/material'
import { Container } from '#mui/material'
import { makeStyles } from '#mui/styles';
import TextField from '#mui/material/TextField';
Here I have used makeStyles
const useStyles = makeStyles({
field: {
// paddingTop: '20px',
padding: '100px',
backgroundColor: 'red',
marginBottom: '100px',
// margin: 100
// display: 'block'
},
});
export default function Create() {
const classes = useStyles()
return (
<Container>
<Typography
variant="h6"
component="h2"
gutterBottom
color="textSecondary"
>
Create a New Note
</Typography>
<form noValidate autoComplete="off" >
<TextField
className={classes.field}
label="Note Title"
variant="outlined"
color="secondary"
fullWidth
required
error={titleError}
>
</TextField>
<Button
type="submit"
color="secondary"
variant="outlined"
onClick={() => console.log("you clicked me")}
endIcon={<KeyboardArrowRightOutlinedIcon />}
>Submit </Button>
</form>
</Container>
)
}
All of this is in a single file
Here is the screenshot.

Answer 1

TextField is just a wrapper component of the Input inside it, to target the input for styling, you can use InputProps:
<TextField
InputProps={{
className: classes.field
}}
EDIT: The margin doesn't work in your TextField because of the CSS specificity. Your style is overrode by the other one from emotion, to fix it, double the className using this technique:
const useStyles = makeStyles({
field: {
// append the same classname to increase the specificity
// output has something like: .makeStyles-field-5.makeStyles-field-5
"&&": {
marginBottom: "100px"
}
}