Где поместить файл темы при использовании gatsby-plugin-material-ui с gatsby?

Question

Мне кажется, что мой файл темы никак не влияет на мои компоненты в приложении Gatsby.Я использую gatsby-plugin-material-ui

соответствующую часть 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;

внутри компонента:

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

подробнее ...

Как использовать тему в другом файле с этим плагином?

Answer 1

Похоже, этот плагин еще не поддерживает theme.Он также использует альфа-версию стиля материала (@material/styles), в то время как вы используете стабильную версию (@material/core/styles).

Так или иначе, вам придется реализовать функцию темы самостоятельно,Если вы решите придерживаться версии 3, возможно, это поможет:

Создайте файл с именем mui-root-wrapper.js в корневом каталоге

// mui-root-wrapper.js

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

export default ({ element }) => (
  <MuiThemeProvider theme={theme}>
    {element}
  </MuiThemeProvider>
)

Затем импортируйте этот компонент в gatsby-browser.js иgatsby-ssr.js:

// gatsby-browser.js, gatsby-ssr.js

import muiRootWrapper from "./mui-root-wrapper"
export const wrapRootElement = MUIWrapper

---

Надеюсь, этого достаточно, чтобы вы пошли.Если вы решите перейти на mui v4, вам придется сделать то же самое, но вместо этого импортировать

import { ThemeProvider } from '@material-ui/styles';

.Вот документация для API.