how do i display text which is longer than the textfield width in the material ui?

I’d keep it simple:

• For long text (content, description…): I’ll just set it to multiline

• For short text (email, password…) I’ll set fullWidth on mobile.

There is no need to be overthinking. Look at the forms from the most popular websites you know, do you see anything other than fullWidth or multiline?

But if you set the TextField to multiline you can make it auto resize when there is not enough space to display the long text by setting resize: both in css. The default is none (disabled).

const useStyles = makeStyles({
  textarea: {
    resize: "both"
  }
});

<TextField
  label="MUI Text Area"
  multiline
  inputProps={{ className: classes.textarea }}
/>

You can also use TextareaAutosize but it sucks and looks nothing like a MUI component out-of-the-box, so don’t use it.

Live Demo