javascript - MUI How to output text with Break Lines? - Stack Overflow

admin管理员组

文章数量:1339702

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>

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>

• javascript
• reactjs
• material-ui
• textfield

Share Improve this question Follow asked Nov 16, 2022 at 20:37 Tom GallandTom Galland 40511 gold badge55 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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.

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.

• Best way to preserve new lines when I post data from a Multi Line Text Field
• New line '\n' not recognized inside TextField in React

本文标签： javascriptMUI How to output text with Break LinesStack Overflow