CODEWITHSUNDEEP
javascriptreactjsmaterial-uitextfield
Tom Galland
Tom Galland

Reputation: 405

MUI How to output text with Break Lines?

Every time I add content to the MUI Textfield it outputs it without any line breaks.

Is there a better solution to use?

<Stack direction="row" alignItems="start" justifyContent="start" mb={5}>
      <TextField 
          name="Content" placeholder="Content" multiline={true}
          value={content}
          rows={18}
          sx={{width: '100%'}}
          onChange={(e) => setContent(e.target.value)}
          />
     <div style={{maxWidth:"50%", paddingLeft:"10px"}} dangerouslySetInnerHTML={{__html: generateContent(content)}}></div>
</Stack>

enter image description here

Upvotes: 6

Views: 17392

Answers (2)

Normal
Normal

Reputation: 3676

Here's an example:

https://codesandbox.io/s/festive-dewdney-crxls

<Stack direction="row">
  <TextField multiline value={state} onChange={handleChange} />
  <Box sx={{ whiteSpace: "pre-wrap" }}>{state}</Box>
</Stack>

I used the whiteSpace: "pre-wrap" sx prop on the box where I am previewing the text, and I used the multiline prop on the textfield to make it a textarea input, and it worked.

Upvotes: 8

rolandsaven
rolandsaven

Reputation: 153

I think the problem lies in your CSS and not in MUI. Use the white-space CSS property like this:

<div style={{maxWidth:"50%", paddingLeft:"10px", whiteSpace: "pre-wrap"}}...

Read more about pre-wrap and the other values here

If this does not work then there are two similar questions but I doubt you will need them.

Upvotes: 1

Related Questions