从CRA迁移到Gatsby破坏了JSS插件

问题描述

在create-react-app中，我使用的是react-jss，因为默认情况下不包含jss-plugin-expand插件。 我有<StylesProvider jss={reactJss}>，并且一切正常。但是，现在我切换到Gatsby，并且完全相同的设置停止了工作。 flex: [1,1,'70px']现在已编译为flex: 1,70px（带逗号）。

import React from 'react'
import { jss } from 'react-jss'
import { StylesProvider,ThemeProvider } from '@material-ui/core/styles'
import CssBaseline from '@material-ui/core/CssBaseline'

export default function PagesLayout({children}){
  return (
    <StylesProvider jss={jss}>
      <ThemeProvider theme={theme}>
        {children}
      </ThemeProvider>
    </StylesProvider>
  )
}

我能想到的唯一区别是，现在此文件是包装器，并且具有{children}而不是<App/>

版本：

"react-jss": "^10.3.0","@material-ui/core": "^4.11.0","react": "^16.12.0",

解决方法

您知道在 Gatsby 中，使用 react-jss(jss) 比使用基础 react 项目更难。 我遇到了和你一样的问题，你可以通过使用更多 Gatsby 插件和一些配置来解决它

详情在此： https://www.gatsbyjs.com/plugins/gatsby-plugin-jss-provider/