MUI React SSR issues

Question

We are setting up Server Side Rendering for an existing project using React-MUI. We have gotten everything working except for styling. None of our CSS will load for the server side render. Any inline CSS works fine, but any of the sheets defined at the start of the file, and bound with export default withStyles(styles)(Page) do not work.

Our styling is defined as follows:

const styles = (theme) => ({ 
    root{
        //some CSS Here ...
    }...
});

Which is then bound to pour props with

export default typeof window !== 'undefined'
    ? withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Home)))
    : withStyles(styles)(Home);

and accessed with

const {classes} = this.props;
//then in render
...

None of the classes.someClassName CSS works in server side rendering, but the second we render in browser it functions normally. Current ideas are to try using a wrapper from MUI but any advice is appreciated.

Thanks!

user_13138349 · Answer

Thanks to @ReedDunkle for the pointers on this. Ended up getting it working by using his linked guide as a reference. I ended up only needing to add sheets.collect(...) as well as css = sheets.toString() and then including the CSS in the header of the HTML doc. No need for the ThemeProvider, it all linked up fine using WithStyles now.

So basically it looks like:

const html = renderToString(sheets.collect());

const css = sheets.toString();

//...
//In your SSR HTML



...

...
{html}

MUI React SSR issues

1 Answers