title: Where to put theme file when using the gatsby-plugin-material-ui with gatsby?
body: <p>I can't seem to get my theme file to have any effect on my components in a Gatsby app. I'm using <a href="https://github.com/hupe1980/gatsby-plugin-material-ui" rel="nofollow noreferrer">gatsby-plugin-material-ui</a></p>
  
  <p>relevant part of <code>gatsby-config.js</code></p>
  
  <pre><code> `gatsby-plugin-netlify-cms`,
      {
        resolve: `gatsby-plugin-material-ui`,
        options: {
          pathToTheme: 'src/theme.js',
        },
  </code></pre>
  
  <p><code>theme.js</code></p>
  
  <pre><code>import { createMuiTheme } from '@material-ui/core/styles';
  
  import indigo from '@material-ui/core/colors/indigo';
  import pink from '@material-ui/core/colors/pink';
  import red from '@material-ui/core/colors/red';
  
  const theme = createMuiTheme({
    palette: {
      primary: indigo,
      secondary: pink,
      error: red,
    },
    spacing: {
        100
    }
  })
  
  
  export default theme;
  </code></pre>
  
  <p>within the component:</p>
  
  <pre><code>imports...
  import { withStyles } from '@material-ui/core/styles';
  
  const styles = theme =&gt; ({
    heroText: {
      color:'white',
      textAlign: 'center',
      lineHeight:7
    },
    mainBlogCopy: {
      marginTop: theme.spacing.unit,
      backgroundColor:theme.palette.primary
    },
  });
  
  export default withStyles(styles)(AboutPage);
  </code></pre>
  
  <p><code>package.json</code></p>
  
  <pre><code> "dependencies": {
      "@material-ui/core": "^3.9.3",
      "gatsby": "^2.3.24",
      "gatsby-image": "^2.0.34",
      "gatsby-plugin-manifest": "^2.0.24",
      "gatsby-plugin-material-ui": "^1.2.4",
  </code></pre>
  
  <p>more...</p>
  
  <p>How does one use a theme in another file with this plugin?</p>