Open simon-abbott opened 2 years ago
same problem is happening for me
gatsby-theme-material-ui doesn't seem to work as a solution as well
same issue, any luck figuring it out @simon-abbott @jonathanrosenbaum ? I even tried porting over the gatsby example from mui that doesn't even use this plugin anymore but no luck.
No luck so far. I have determined that React 18 has a worse flash than React 17, but even 17 has the issue.
+1
@hupe1980 any ideas how to fix this? It seems to be a common problem and blocking many from upgrading. 🙏
Any updates for this issue?
To avoid FOUC, I have to preset display: none
for main container then show it using useEffect
hook
I am experiencing the same issue after updating @material-ui (v4) to @mui (v5) and also blocked from updating our site.
Any advice on how to fix would be hugely appreciated. 🙏
+1, my statically rendered pages don't get the CSS they need. Library doesn't seem to be usable at all.
(For me at least). I'm migrating a v4 app to MUI v5, and my v4 app still uses the old styling pattern, with the useStyles
hook.
Here's my pages/index.js
:
THE FOLLOWING RESULTS IN A FOUC BECAUSE useStyles
DOESN'T KICK IN UNTIL RENDER
import React from 'react'
import makeStyles from '@mui/styles/makeStyles'
import Box from '@mui/material/Box'
const useStyles = makeStyles((theme) => ({
splash: {
width: '100vw',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#372756',
}
}))
const IndexPage = () => {
const classes = useStyles()
return (
<Box
component="main"
className={classes.splash}
>
<Box>
My Splash Screen
</Box>
</Box>
)
}
export default IndexPage
DOING THIS, THE STATIC RENDER IS CORRECT:
import React from 'react'
import Box from '@mui/material/Box'
const IndexPage = () => {
return (
<Box
component="main"
sx={{
width: '100vw',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#372756',
}}
>
<Box>
My Splash Screen
</Box>
</Box>
)
}
export default IndexPage
I recently upgraded from
@material-ui
(v4) to@mui
(v5), and accordingly upgraded togatsby-plugin-material-ui
v4. Everything seemed great when testing the site viagatsby dev
, but as soon as I tried to build it for production I started getting FOUC. Looking deeper into this sectionhttps://github.com/hupe1980/gatsby-plugin-material-ui/blob/6eda811c6ad0548d23efc6aed7a17c217bd6265a/gatsby-plugin-material-ui/src/gatsby-ssr.js#L24-L32
I noticed that
style.css
is always empty string''
.I've tried overriding the cache key, putting our other wrappers into a plugin that runs before or after
gatsby-plugin-material-ui
, removing<StyledEngineProvider>
, nothing has worked. I'm at a loss for what to try next. If anyone has any ideas on what might be happening please let me know, this is a complete blocker for updating our site.