Where to put theme file when using this plugin?

[kpennell]

I can't seem to get my theme file to have any effect on my components in a Gatsby app.

relevant part of gatsby-config.js

 `gatsby-plugin-netlify-cms`,
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        pathToTheme: 'src/theme.js',
      },

theme.js

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;

within the component:

imports...
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  heroText: {
    color:'white',
    textAlign: 'center',
    lineHeight:7
  },
  mainBlogCopy: {
    marginTop: theme.spacing.unit,
    backgroundColor:theme.palette.primary
  },
});

export default withStyles(styles)(AboutPage);

package.json

 "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",

more...

How does one use a theme in another file with this plugin?

[oliviertassinari]

@kpennell This plugin doesn't handle the theme. This plugin handles @material-ui/styles. You can have a look at https://github.com/hupe1980/gatsby-plugin-material-ui#examples for more detailed example using Material-UI v4.

[talolard]

Hi @oliviertassinari I took a look over there but couldn't quite figure it out, could you help ? It looks like the theme is defined but nothing tells the plugin where it is, is it just assumed to be in theme.js ? If so, I'm having the same issue as @kpennell : The theme.js file is there but has no effect Thanks

[hupe1980]

Hi @kpennell @talolard The plugin has no pathToTheme parameter. The theme is passed in the gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        theme: {
           primaryColor: '#9c27b0',
        },
      },
    },
  ],
};

In the next version for Material-UI v4, the theme support will be completely removed. What it might look like, you can see here: https://www.npmjs.com/package/gatsby-theme-material-ui https://github.com/mui-org/material-ui/tree/next/examples/gatsby-next

[kpennell]

Thanks for clarifying. I think I'm confused because when I search through projects using this plugin, I find like 3-4 different implementation styles, including the pathtotheme parameter (used by some).

On Thu, Apr 25, 2019 at 10:30 AM hupe1980 notifications@github.com wrote:

Hi @kpennell https://github.com/kpennell @talolard https://github.com/talolard The plugin has no pathToTheme parameter. The theme is passed in the gatsby-config.js

module.exports = { plugins: [ { resolve: gatsby-plugin-material-ui, options: { theme: { primaryColor: '#9c27b0', }, }, }, ], };

In the next version for Material-UI v4, the theme support will be completely removed. What it might look like, you can see here: https://www.npmjs.com/package/gatsby-theme-material-ui https://github.com/mui-org/material-ui/tree/next/examples/gatsby-next

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hupe1980/gatsby-plugin-material-ui/issues/16#issuecomment-486766109, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIC4IJV344SXGIFP3JHDBDPSHTCPANCNFSM4HH76IAQ .

[hupe1980]

Ok! ! I will close the issue then

[kpennell]

@hupe1980 so the pathtotheme thing was another project? Or just someone implemented it differently? Is it possible to have a file for it?

[hupe1980]

@kpennell Yes, the parameter was only available in another project. If you still need the functionality, you can use the following workaround: https://github.com/hupe1980/gatsby-plugin-material-ui/issues/12#issuecomment-484962819

The gatsby-config.js must then look like this

// gatsby-config.js
...
{
      resolve: `gatsby-plugin-material-ui`,
      options: {
        theme: {
          typography: {
            useNextVariants: true,
          },
        },
      },
    }
...

[kpennell]

Thanks

On Sat, Apr 27, 2019 at 10:44 AM hupe1980 notifications@github.com wrote:

@kpennell https://github.com/kpennell Yes, the parameter was only available in another project. If you still need the functionality, you can use the following workaround:

12 (comment)

https://github.com/hupe1980/gatsby-plugin-material-ui/issues/12#issuecomment-484962819

The gatsby-config.js must then look like this

// gatsby-config.js... { resolve: gatsby-plugin-material-ui, options: { theme: { typography: { useNextVariants: true, }, }, }, }...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hupe1980/gatsby-plugin-material-ui/issues/16#issuecomment-487306063, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIC4IOMBOKONKSAUCUTPH3PSSGGFANCNFSM4HH76IAQ .

[kpennell]

@hupe1980 I'm noticing that the theme option in the gatsby-config.js isn't doing anything. Is there anyway besides #12 that would work for this? I'm using gatsby-browser and ssr and don't want to create a bunch of headache.

[kpennell]

nevermind: https://stackoverflow.com/questions/55821752/where-to-put-theme-file-when-using-the-gatsby-plugin-material-ui-with-gatsby

[hupe1980]

The theme option is no longer available in v4. You can use a local plugin (see gatsby-plugin-top-layout) or you can use gatsby-theme-material-ui