Material-ui: マテリアル-UI用紙コンポーネントが改行文字を認識しない

作成日 2017年11月17日 · 5コメント · ソース: mui-org/material-ui

Material-UI Paperコンポーネントに、改行文字を含む文字列を渡します。ただし、Paperコンポーネントは、新しい行を開始していないため、それを無視しているようです。この動作は意図的なものですか、それともバグですか。問題のコードは以下のとおりです（comment.textは問題の文字列です）：

<Paper key={index} rounded={false} style={styles.paper}> 
<div>{comment.text}</div> 
<div style={{textAlign: 'right', color: grey500}}>{comment.user + ", " + comment.date}</div> 
</Paper>

question

ソース

alexanderwhatley

最も参考になるコメント

私が使用したもの： style={{whiteSpace: 'pre-line'}}

<Typography
  variant="body1"
  style={{whiteSpace: 'pre-line'}}
>
  {body}
</Typography>

参照：
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n

ericksprengel 2019年02月24日

👍70 ❤14 🚀4 🎉4 👀2

全てのコメント5件

@alexanderwhatley comment.textの値は何ですか？そして、あなたはすべてのどのバージョンを使用していますか？私たちが提供するテンプレートは、質問に効率的に答えるのに役立ちます。 😁

m2mathew 2017年11月17日

ねえ@ m2mathew 、ごめんなさい。 material-uiのバージョンは0.17.4で、comment.textの値は「こんにちは\ nお元気ですか？」です。

alexanderwhatley 2017年11月17日

さて、DOMがこれをどのように処理するかを考えてください。 HTMLファイルの2つの<div>の間に置くと、 \nがレンダリングされると思います。

これはMUIとは明示的に関連していないため、この問題を解決します。 DOM内にコンテンツを実装するためのヘルプが必要な場合は、必ずStackOverflowなどにアクセスしてください。

m2mathew 2017年11月17日

👍1

私が使用したもの： style={{whiteSpace: 'pre-line'}}

<Typography
  variant="body1"
  style={{whiteSpace: 'pre-line'}}
>
  {body}
</Typography>

参照：
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n

ericksprengel 2019年02月24日

👍70 ❤14 🚀4 🎉4 👀2

「タイポグラフィ」コンポーネントに追加の小道具を追加する価値があるようです。

goodwin64 2019年12月05日

👍12

このページは役に立ちましたか？

0 / 5 - 0 評価

Material-ui: マテリアル-UI用紙コンポーネントが改行文字を認識しない

最も参考になるコメント

全てのコメント5件

関連する問題