reactjs - 使用 GatsbyJS 和 Material-UI 重新加载页面时样式消失
问题描述
在页面重新加载时,样式消失。在第一次加载时,一切看起来都很正常。本地开发环境不会出现此问题。我正在使用 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')
这是网站。即使我在这里链接它,主页上的英雄部分也不会加载,但如果你点击离开(导航上的任何地方)并返回它就在那里。如果您重新加载,它会再次消失,但如果您点击离开并返回,它会重新出现。这发生在所有页面上。为什么风格会消失?
解决方案
我找到了答案。这是目前 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)
}
}
推荐阅读
- plot - 动态绘图在日内工作但不是每天
- mysql - '字段列表中的未知列'tbcontractItems.qtyContracted_int'
- ios - firebase_in_app_messaging 依赖问题。出现错误:“使用未声明的标识符‘FIRInAppMessaging’”
- python - 如何替换 CSV 文件中的特定字符
- json - WSO2 Enterprise Integrator 6.6.0 使用 XSLT 将 XML 响应转换为 Json
- asp.net-mvc - 从 Jquery 调用 Asp.Net Core MVC 操作时找不到 404
- date - 在 PowerBI 中将数字转换为日期格式
- kubernetes - 使用 helm 图表在 GCP GKE 中安装 IBM Mq,出现 kube 版本错误
- excel - VBA 仅从另一个工作簿更新和插入新数据
- c# - 当进程退出事件触发不起作用时,C#启用/禁用用户表单