title: React material-ui withStyles on external file not working
body: <p>I took a look a <a href="https://stackoverflow.com/questions/51729702/how-to-set-material-ui-withstyle-style-on-an-external-file-in-react">this question</a>, but still did manage to get this to work.</p>
  
  <p>The intention is to separate the styles from the component file in order to have a cleaner setup. </p>
  
  <p>It works fine when there is no <code>theme</code> involved.</p>
  
  <p>I did try several iterations, with or without wrapping <code>withStyles</code> in the 
  styles.js files.</p>
  
  <p>The particular example below will of course throw error</p>
  
  <p><code>TypeError: "theme.spacing is not a function"</code></p>
  
  <p>So I have created a file for the <code>css</code> as follows</p>
  
  <p>styles.js</p>
  
  <pre><code> import { withStyles } from '@material-ui/core/styles';
  
  export default theme =&gt; ({
  ...
   textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
   }
   ...
  });
  </code></pre>
  
  <p>Then on the component file:</p>
  
  <p>login.js</p>
  
  <pre><code>import styles from './styles';
  ...
  render() {
     const { classes } = this.props;
  }
  ...
  export default withCookies(withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Login))));
  </code></pre>