title: Material UI TextField outlined not rendering correctly
body: <p>I am trying to add a TextField with outline in my project but it does not render correctly.</p>
  
  <p>I get the following </p>
  
  <p><a href="https://i.stack.imgur.com/0PGNV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0PGNV.png" alt="enter image description here"></a></p>
  
  <p>I have no idea why, if run it in CodePen it works just fine.</p>
  
  <p>Any idea why I get the underline of the text area showing up and also shifting the content so that it is not centered inside the outline border?</p>
  
  <p>Component:</p>
  
  <pre><code>import React from 'react';
  
  import TextField from '@material-ui/core/TextField';
  
  
  class Test extends React.Component {
  
      render() {
          return (
              &lt;TextField
                  label="some text"
                  margin="normal"
                  variant="outlined"
              /&gt;
          );
      }
  }
  
  
  export default Test;
  </code></pre>