title: Typography in React Material-UI
body: <p>I've this textbox:</p>
  
  <pre><code>&lt;Typography component="p" className={classes.text}&gt;
          {this.props.post.text}
  &lt;/Typography&gt;
  </code></pre>
  
  <p>I'd like to be able to include paragraphs but all text entered into it gets printed on one line.</p>
  
  <p>The documentation suggests that <code>paragraph</code> is defaulted to <code>false</code> so I must set it to `true.</p>
  
  <p>I've tried the following:</p>
  
  <pre><code>&lt;Typography component="p" className={classes.text} paragraph="true"&gt;
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>&lt;Typography component="p" className={classes.text} paragraph={true}&gt;
  </code></pre>
  
  <p>Neither work so all my text still gets printed to one line.</p>
  
  <p>How do I get the paragraphs to show?</p>
  
  <p><strong>Additional info:</strong>
  As I now understand, the paragraph={true} attribute in Typography just <a href="https://material-ui.com/api/typography/" rel="noreferrer">adds a bottom-margin to the whole text</a>. I.E. my one block of text is a paragraph. If I want another paragraph I would have to add another <code>Typography</code>. Something like:</p>
  
  <pre><code>&lt;Typography component="p" className={classes.text} paragraph={true}&gt;
          {this.props.post.text}
  &lt;/Typography&gt;
  &lt;Typography component="p" className={classes.text} paragraph={true}&gt;
          {this.props.post.text2}
  &lt;/Typography&gt;
  </code></pre>
  
  <p>This is not exactly what I want. Perhaps what I should be aiming for is to have the return characters in my input text recognised. Is this correct and if so, how is it done?</p>
  
  <p>I tried this:</p>
  
  <pre><code>  &lt;pre&gt;
      &lt;Typography component="p" className={classes.text}&gt;
        {this.props.post.text}
      &lt;/Typography&gt;
    &lt;/pre&gt;
  </code></pre>
  
  <p>The  tag preservers the whitespace and line breaks inside the tags as is.</p>
  
  <p>This is not suitable though. If I have long line the text does not wrap at the Card width. Instead anything beyond the width of the card becomes truncated. Clearly I want it all. I want my text to wrap in the card and also for it to support new lines and paragraphs. How is this done?</p>