https://material-ui.com/api/form-helper-text/#props
it is not clear from this documentation
component | elementType | 'p' | The component used for the root node. Either a string to use a HTML element or a component.
Of how to properly override - ie. use a 'div' instead of a 'p'
You can set it in the FormHelperTextProps of TextField like so
<TextField
FormHelperTextProps={{ component: 'div' }}
helperText="Your helper text"
/>
Note, that if you are using TypeScript that this is currently not correctly typed (see the GitHub issue).
You then have to annotate the line with // @ts-expect-error or simply cast the props to any.
import { makeStyles} from "material-ui/core"
const useStyles = makeStyles((theme) => ({
field: {
"& .MuiFormHelperText-root": {
position: 'absolute',
bottom: -20
}
},
})
const Form =(props)=>{
const classes = useStyles();
return( <TextField
variant="outlined"
margin="dense"
required
className={classes.field}
fullWidth
id="lastName"
label="Last Name"
helperText={"This is sample error"}
name="lastName"
autoComplete="lname"
error
/>)
}
I think this is what you are looking for ...