title: Wrapping component breaks style
body: <pre><code>const Login = () =&gt; (
    &lt;FlatButton label="Login" /&gt;
  );
  
  export class App extends Component {
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;MuiThemeProvider&gt;
            &lt;AppBar
              iconElementRight={&lt;Login /&gt;}
            /&gt;
          &lt;/MuiThemeProvider&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The results is a button with broken styling.</p>
  
  <p>Here is an image: <a href="https://i.imgur.com/1IHboDq.png" rel="nofollow noreferrer">http://i.imgur.com/1IHboDq.png</a></p>
  
  <p>However, inserting the component directly works perfectly fine.
  Like this:</p>
  
  <pre><code>      &lt;AppBar
          iconElementRight={&lt;FlatButton label="Login" /&gt;}
        /&gt;
  </code></pre>
  
  <p><a href="https://i.imgur.com/1kUaVYT.png" rel="nofollow noreferrer">http://i.imgur.com/1kUaVYT.png</a></p>
  
  <p>Am I doing something wrong or is this a bug?</p>