Make ThemeProvider available in pages

[tw1t611]

Hi,

I recently encountered a problem on using Material UI's ThemeProvider with Gatsby. Since there is no root component, it's not possible to wrap the whole App with the ThemeProvider. Therefor I do wrap the layout component, which gets imported into the pages. In consequence I need to implement a workaround for all pages, to access the theme.

ThemeProvider in Layout:

const Layout = ({ children }) => {
  const classes = useStyles()
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Header />
      <main className={classes.content}>
        <div className={classes.toolbar} />
        {children}
      </main>
      <Footer />
    </ThemeProvider>
  )
}

Page workaround:

import theme from "../components/theme"

const Theme = theme
const useStyles = makeStyles(Theme => ({
// mui styles
}))

Is there a better way to use material ui ThemeProvider with gatsby? Would it be possible to provide a injectIntoPages option in this plugin?

[hupe1980]

@tw1t611 Take a look at the example section in the README

[tw1t611]

I did, what did I miss? I found the theme option in v3, is it still available in v4? Does it use the mui defaults as a base?

[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

[tw1t611]

Thank you very much! gatsby-theme-material-ui is exactly what I was looking for. Don't know, why I had not found it before.