每次我將內容添加到 MUI 文本欄位時，它都會在沒有任何換行符的情況下輸出它。
有沒有更好的解決方案可以使用？
<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>
uj5u.com熱心網友回復：
這是一個例子：
https://codesandbox.io/s/festive-dewdney-crxls
<Stack direction="row">
<TextField multiline value={state} onChange={handleChange} />
<Box sx={{ whiteSpace: "pre-wrap" }}>{state}</Box>
</Stack>
我在預覽文本的框上使用了whiteSpace: "pre-wrap"sx 道具，并在文本欄位上使用了multiline道具使其成為文本區域輸入，并且它起作用了。
uj5u.com熱心網友回復：
我認為問題在于您的 CSS 而不是 MUI。像這樣使用white-spaceCSS 屬性：
<div style={{maxWidth:"50%", paddingLeft:"10px", whiteSpace: "pre-wrap"}}...
在此處閱讀有關pre-wrap其他值的更多資訊
如果這不起作用，那么有兩個類似的問題，但我懷疑您是否需要它們。
- 當我從多行文本欄位發布資料時保留新行的最佳方法
- 在 React 的 TextField 中無法識別新行 '\n'
uj5u.com熱心網友回復：
我會將內容呈現為jsx element
So 而不是字串，您將能夠使用 HTML 來幫助您格式化文本。
function JsxElement() {
// expected output:
// This is some text
//
// This is some more text
return (
<p>This is some text</p>
<br />
<p>This is some more text</p>
// or using MUI
<Typography>This is some text</Typography>
<br />
<Typography>This is some more text</Typography>
)
}
<Stack direction="row" alignItems="start" justifyContent="start" mb={5}>
<TextField
name="Content" placeholder="Content" multiline={true}
value={<JsxElement />}
rows={18}
sx={{width: '100%'}}
onChange={(e) => setContent(e.target.value)}
/>
<div style={{maxWidth:"50%", paddingLeft:"10px"}} dangerouslySetInnerHTML={{__html: generateContent(content)}}></div>
</Stack>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/535362.html
下一篇：過濾日期在范圍內的物件