Reactjs 使用GatsbyJS和材质UI重新加载页面时,样式将消失

Reactjs 使用GatsbyJS和材质UI重新加载页面时,样式将消失,reactjs,material-ui,gatsby,Reactjs,Material Ui,Gatsby,重新加载页面时,样式将消失。在第一次加载时,一切正常。本地开发环境中不会出现此问题。我正在使用GatsbyJS和Material UI。我尝试过以不同的顺序放置插件,我尝试过更改组件中的样式。我不明白为什么它会在本地开发环境中工作,但在云端它会崩溃 在盖茨比配置中,我将物料UI设置为: { resolve: `gatsby-plugin-material-ui`, options: { stylesProvider: { injectF

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

在盖茨比配置中,我将物料UI设置为:

{
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },
盖茨比浏览器和盖茨比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')
从“React”导入React
从“@material ui/styles/ThemeProvider”导入ThemeProvider
从“./src/components/ui/theme”导入主题
从“./src/context/GlobalContext”导入GlobalContextProvider
从“./src/context/CartContext”导入CartContextProvider
导入“./src/components/layout.css”
导出常量wraproteElement=({element})=>{
返回(
{element}
)
}
要求('typeface-roboto')

这是网站。即使我把它链接到这里,主页上的英雄部分也不会加载,但是如果你点击别处(导航上的任何地方)并返回,它就在那里。如果重新加载,它将再次消失,但如果单击“离开”并返回,它将重新出现。这在所有页面上都会发生。为什么风格正在消失?

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

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

import ReactDOM from 'react-dom'

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

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

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

import ReactDOM from 'react-dom'

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

你说“这里是网站”,但没有提供链接。这是故意的吗?我添加了链接以演示问题。进一步研究后,这是盖茨比的一个已知问题。你说“这里是网站”,但没有提供链接。这是故意的吗?我添加了链接以演示问题。进一步研究后,这是盖茨比的一个已知问题。我只是不得不做同样的事情。。我希望他们能尽快解决这个问题我也要这么做。。我希望他们能尽快解决这个问题