react-static-plugin-jss configured for MaterialUI doesn't always insert correct CSS

When using react-static-plugin-jss configured to use MaterialUI as shown in the guide, some routes are rendered with the correct CSS, but others are not. In the cases where it is missing, the <style id="jss-server-side"> tag with some minimal CSS is still inserted, but it is not the correct CSS that should be getting rendered.

Environment

1. react-static -V: 6.1.4
2. node -v: 11.4.0
3. npm -v: 6.4.1
4. Operating system: Windows 10 x64
5. Browser and version (if relevant): N/A

Reproducible Demo

Here is the branch in my repository with the plugin setup: https://github.com/Herohtar/thalion-herohtar/tree/jss-plugin

After running build the root index.html does not contain the correct MaterialUI CSS, but 404.html does. Looking into the routes, blog/2018/index.html does not contain the correct CSS, but blog/2017/index.html does. There are some other pages that are missing the MaterialUI CSS as well.

For comparison, here is the main branch that is just using a dropped-in node.api.js configured for MaterialUI and the CSS is rendered correctly on all pages: https://github.com/Herohtar/thalion-herohtar/tree/master

[tannerlinsley]

I’ll take a closer look as soon as I can

On Sat, Jan 5, 2019 at 2:33 PM Herohtar [e-mail] wrote:

So looking at it some more, the docs seem to imply that you have to give it a MuiThemeProvider to use SSR at all for MaterialUI, and state that you need to create a new instance of the sheets manager, sheets registry, and class name generator for each request. I’m not sure of the exact details of how those work together, but it seems separating them out like that causes them to not function correctly.

Even without trying to insert MuiThemeProvider somewhere, there is still the inconsistent CSS when trying to use MaterialUI with the jss plugin as currently described by the guide. I think it is more than just an edge case and will require it’s own plugin… I’m not sure how you could write it to use the jss plugin since MuiThemeProvider needs to be inserted below JssProvider…

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/nozzle/react-static/issues/940#issuecomment-451692147, or mute the thread https://github.com/notifications/unsubscribe-auth/AFUmCXNiLThXkqky41cnFDJnbofArQPcks5vARo7gaJpZM4ZpOHG .

[Herohtar]

So looking at it some more, the docs seem to imply that you have to give it a MuiThemeProvider to use SSR at all for MaterialUI, and state that you need to create a new instance of the sheets manager, sheets registry, and class name generator for each request. I’m not sure of the exact details of how those work together, but it seems separating them out like that causes them to not function correctly.

Even without trying to insert MuiThemeProvider somewhere, there is still the inconsistent CSS when trying to use MaterialUI with the jss plugin as currently described by the guide. I think it is more than just an edge case and will require it’s own plugin… I’m not sure how you could write it to use the jss plugin since MuiThemeProvider needs to be inserted below JssProvider…