reactjsmaterial-uicreate-react-appprerender

Style tags not coming in mui 5 react

I have built 2 projects in React.js, one is using material ui 4 and another one is using mui5. Both the websites are working fine and styling is also perfect. I have noticed that in the project which is built using material ui 4, I can see style tags are loading whereas in the project which is built using mui 5 style tag with CSS is not there. PFB the screenshot.

I am using pre-render.io for prerendering website, due to the above behavior website built using material ui 5 is showing proper styling to the bot whereas, in the case of the mui5 website, no CSS is loading for the bot.

MUI 5 project:

enter image description here

Material UI 4 project:

enter image description here

I have utilized both the material version as per the doc on their website. The only difference is mui5 project is built with CRA and the material ui 4 project is built with a custom webpack.

How can I load mui 5 styling in case of prerendering using prerender.io

Solution

  • You can cache it, mui documentation recommends that.

    https://mui.com/material-ui/integrations/interoperability/#emotion

    const emotionCache = createCache({
    key: 'css',
    container: document.head, // pointing to <iframe>.document in this case, ymmv
    prepend: true, // ymmv
    speedy: false // <--- key setting
  })

<CacheProvider value={emotionCache}>