title: how to expand TextField to full width in the grid container?
body: <p>The <code>TextField</code> component is not drawn to full width while
  the <code>Paper</code> component is drawn to full width.
  Does somebody have any idea?</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Grid container spacing={2} className={classes.grid}&gt;
    &lt;Grid item xs={12} md={6}&gt;
      &lt;TextField id=&quot;outlined-basic&quot; label=&quot;Outlined&quot; variant=&quot;outlined&quot; /&gt;
    &lt;/Grid&gt;
  
    &lt;Grid item xs={12} md={6}&gt;
      &lt;Paper className={classes.paper}&gt;2&lt;/Paper&gt;
    &lt;/Grid&gt;
  
    &lt;Grid item xs={4}&gt;
      &lt;Paper className={classes.paper}&gt;6&lt;/Paper&gt;
    &lt;/Grid&gt;
  
    &lt;Grid item xs={4}&gt;
      &lt;Paper className={classes.paper}&gt;7&lt;/Paper&gt;
    &lt;/Grid&gt;
  
    &lt;Grid item xs={4}&gt;
      &lt;Paper className={classes.paper}&gt;8&lt;/Paper&gt;
    &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>