使用 GatsbyJS 和 Material-UI 重新加载页面时样式消失

Question

在页面重新加载时，样式会消失。在第一次加载时，一切看起来都很正常。本地开发环境不会出现此问题。我正在使用 GatsbyJS 和 Material-UI。我尝试以不同的顺序放置插件，我尝试更改组件中的样式。我不明白为什么它可以在本地开发环境中工作，但在云上它会中断。

在 gatsby-config 中，我将 Material-UI 设置为：

{
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },

gatsby-browser 和 gatsby-ssr 都有这个：

import React from 'react'
import ThemeProvider from '@material-ui/styles/ThemeProvider'
import theme from './src/components/ui/Theme'
import GlobalContextProvider from './src/context/GlobalContext'
import CartContextProvider from './src/context/CartContext'
import './src/components/layout.css'

export const wrapRootElement = ({ element }) => {
  return (
    <ThemeProvider theme={theme}>
      <CartContextProvider>
        <GlobalContextProvider>{element}</GlobalContextProvider>
      </CartContextProvider>
    </ThemeProvider>
  )
}

require('typeface-roboto')

这里是网站。即使我在这里链接它，主页上的英雄部分也不会加载，但如果你点击离开（导航上的任何地方）并返回它就在那里。如果您重新加载，它会再次消失，但如果您点击离开并返回，它会重新出现。这发生在所有页面上。为什么样式消失了？

Answer 1

我找到了答案。这是目前 Gatsby 内部的一个已知问题。希望这个问题能很快得到解决，因为这似乎是盖茨比的一个大问题。

https://github.com/gatsbyjs/gatsby/issues/25729

解决方法是在 gatsby-browser.js 中以性能为代价使用此代码：

import ReactDOM from 'react-dom'

export function replaceHydrateFunction() {
  return (element, container, callback) => {
    ReactDOM.render(element, container, callback)
  }
}