title: React - Material UI Typography how to break long string to multiple lines
body: <p>I'm using ReactJS and the components library called MaterialUI. I'm having an issue with the Typography component.</p>
  
  <p>What happens is that if I write a long text it exceed its container and doesn't go on a new line:</p>
  
  <pre><code>import React from "react";
  import { Redirect } from "react-router";
  import { withRouter } from "react-router-dom";
  
  import Container from "@material-ui/core/Container";
  import CssBaseline from "@material-ui/core/CssBaseline";
  import Typography from "@material-ui/core/Typography";
  
  function Homepage() {
    return (
      &lt;div&gt;
        &lt;React.Fragment&gt;
          &lt;CssBaseline /&gt;
          &lt;Container fixed&gt;
            &lt;Typography variant="h1" component="h2" align="center"&gt;
              123 456 789 qwertyuiopasdfghjklzxcvbnm
            &lt;/Typography&gt;
          &lt;/Container&gt;
        &lt;/React.Fragment&gt;
      &lt;/div&gt;
    );
  }
  
  export default withRouter(Homepage);
  </code></pre>
  
  <p>below an image:</p>
  
  <p><a href="https://i.stack.imgur.com/G3X9w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G3X9w.png" alt="enter image description here"></a></p>
  
  <p>This happens in the mobile mode and also in desktop mode.</p>
  
  <p>Do you know how to fix this behavior? I would like the long words will be split on a new line if the maximum width of the container has been reached.</p>