Styles not injected during build, causes FOUC

[simon-abbott]

I recently upgraded from @material-ui (v4) to @mui (v5), and accordingly upgraded to gatsby-plugin-material-ui v4. Everything seemed great when testing the site via gatsby dev, but as soon as I tried to build it for production I started getting FOUC. Looking deeper into this section

https://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.

[jonathanrosenbaum]

same problem is happening for me

[jonathanrosenbaum]

gatsby-theme-material-ui doesn't seem to work as a solution as well

[zanedev]

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.

[simon-abbott]

No luck so far. I have determined that React 18 has a worse flash than React 17, but even 17 has the issue.

[Hunner4D]

+1

[zanedev]

@hupe1980 any ideas how to fix this? It seems to be a common problem and blocking many from upgrading. 🙏

[ducthien1490]

Any updates for this issue? To avoid FOUC, I have to preset display: none for main container then show it using useEffect hook

[tjg37]

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. 🙏

[thclark]

+1, my statically rendered pages don't get the CSS they need. Library doesn't seem to be usable at all.

[thclark]

Solution

(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