Integration of new Server Rendering API
See original GitHub issueI was using Material UI with Apollo and Next.js.
Previously I use the StylesProvider for the rendering in App Component. I pass disableGeneration as true to StyleProvider to perform Apollo Server-side rendering.
I found that the new guide has been changed to ServerStyleSheet. StylesProvider has been changed to sheets.collect.
I think it is not great to new a ServerStyleSheet and pass sheets.collect to App Component render function. I see the latest example use the ServerStyleSheet in the document.tsx instead of app.tsx.
If I do so, how could I pass disableGeneration during Apollo Server-side rendering? Do I need two ServerStyleSheet instance? If not, how to do that?
And could the nextjs example be enhanced that we could dynamically change the theme color on client-side? I think it is a very common use-case, but its a bit tricky as we have to share the theme color in a memoized context.
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (4 by maintainers)

Top Related StackOverflow Question
I made repo that uses the new API, including disableGeneration when using Apollo’s getDataFromTree: https://github.com/heysailor/material-ui-nextjs
The StylesProvider won’t be deprecated. The sheet manager and collector are no longer documentation. These two objets are now considered internals. As long as it’s documented, you are good.