web-dev-qa-db-ja.com

React Material-UIのタイポグラフィ

私はこのテキストボックスを持っています：

<Typography component="p" className={classes.text}>
        {this.props.post.text}
</Typography>

段落を含めることができるようにしたいのですが、そこに入力されたすべてのテキストが1行に印刷されます。

ドキュメントでは、paragraphはデフォルトでfalseに設定されているため、 `trueに設定する必要があります。

私は以下を試しました：

<Typography component="p" className={classes.text} paragraph="true">

私も試しました：

<Typography component="p" className={classes.text} paragraph={true}>

どちらも機能しないため、すべてのテキストが1行に印刷されます。

段落を表示するにはどうすればよいですか？

追加情報：今理解しているように、タイポグラフィのparagraph = {true}属性は テキスト全体に下マージンを追加します 。 I.E.私の1ブロックのテキストは段落です。別の段落が必要な場合は、別のTypographyを追加する必要があります。何かのようなもの：

<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text}
</Typography>
<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text2}
</Typography>

これは私が望んでいることではありません。おそらく、私が目指しているのは、入力テキストの戻り文字を認識させることです。これは正しいですか？もしそうなら、それはどのように行われますか？

私はこれを試しました：

  <pre>
    <Typography component="p" className={classes.text}>
      {this.props.post.text}
    </Typography>
  </pre>

タグは、タグ内の空白と改行をそのまま保持します。

ただし、これは適切ではありません。長い行がある場合、テキストはカード幅で折り返されません。代わりに、カードの幅を超えるものはすべて切り捨てられます。明らかに私はそれをすべて欲しい。テキストをカードで囲み、新しい行や段落をサポートするようにしたい。これはどのように行われますか？

reactjsmaterial-uitypography
4
runnerpaul

新しい段落の場合

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

新しい行だけのために

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <div key={key}>{i}</div>;
  })}
</Typography>
3
Jöcker

私はあなたの答えを試しました、そしてそれは必要に応じて完全に働きました。ただし、コンソールはマイナーエラーを返します

警告：validateDOMNesting（...）：_<p>_は_<p>_の子孫として表示できません。

.map()の_<p>_タグを_<Typography>_に置き換え、代わりにすべてを_<div>_でラップすることで、回答を少し改善しました。

_<div className={classes.text}>
  {this.props.post.text.split('\n').map((i, key) => {
    return <Typography key={key} paragraph variant="body1">{i}</Typography>;
  })}
</div>
_

（_body1_を任意のバリアントに置き換えることができます！）

これは私にとっての警告を取り除くようであり、あなたが意図したように機能することを願っています。

4
sabriele

私はこれを思いついた：

<Typography component="p" className={classes.text}>
  {this.props.post.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

これを行うためのより良い方法があれば、私はそれを聞きたがっています。

1
runnerpaul

これは本当に奇妙な振る舞いです。私の知る限り、あなたはすべてを正しくやっています。 pはそれ自体がブロック要素として表示されるため、デフォルトでは希望どおりに表示されます。ただし、.textcssクラスでそれをオーバーライドしている可能性があります。問題があるかどうかを確認してください。そうでない場合は、いつでもバリアントプロパティvariant="headline"を使用して、それらを新しい行に配置できます。

1
Lazar Nikolic

これが正しければ、HTMLの機能を活用し、<br />-要素を追加して、改行を挿入することができます。

1
Emanuel Kluge