Theme workaround seems to be necessary

[NikiSchlifke]

Currently using the ThemeProvider inside a Layout Component does not work. Using the ThemeProvider inside a regular component provides the theme to the first child but does not propagate.

I had to use the workaround described here: https://stackoverflow.com/questions/55821752/where-to-put-theme-file-when-using-the-gatsby-plugin-material-ui-with-gatsby

This works for me:

// mui-root-wrapper.js

import React from 'react'
import { ThemeProvider } from '@material-ui/styles'
import theme from './src/theme.js'
import CssBaseline from '@material-ui/core/CssBaseline'

const MUIWrapper = ({ element }) => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {element}
  </ThemeProvider>
)
export default MUIWrapper

// gatsby-ssr.js

import MUIWrapper from './mui-root-wrapper'

export const wrapRootElement = MUIWrapper

// gatsby-browser.js

import MUIWrapper from './mui-root-wrapper'

require('typeface-roboto')

export const wrapRootElement = MUIWrapper

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.