Why it shows box inside a box when add multiline in react mui textfield and how to remove the inner box

Question

I want to create a textfield using react mui textfield. But when I add the multiline prop it gives two boxes with border. how to remove the inner box margin

I tried several css and styling options but didn't work

Answer 1

The issue you're encountering is likely due to the default styling of the TextField component in Material-UI.

One solution to remove the inner margin of the TextField is to use the sx prop to override the default styles.

Documentation on how to use sx prop: https://mui.com/system/getting-started/the-sx-prop/

Example below:

 <TextField
   multiline
   sx={{ p: 0, m: 0 }}
 />