Full-Stack React Projects

Preparing Material-UI styles for SSR

When the server receives any request, prior to responding with the generated markup containing the React view, we need to prepare the CSS styles that should also be added to the markup, so the UI does not break on initial render.

mern-skeleton/server/express.js:

const sheetsRegistry = new SheetsRegistry()
const theme = createMuiTheme({
    palette: {
      primary: {
      light: '#757de8',
      main: '#3f51b5',
      dark: '#002984',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff79b0',
      main: '#ff4081',
      dark: '#c60055',
      contrastText: '#000',
    },
      openTitle: indigo['400'],
      protectedTitle: pink['400'],
      type: 'light'
    },
})
const generateClassName = createGenerateClassName()

In order to inject the Material-UI styles, on every request ...