Adding Material UI to React SSR

Question

I'm using this really awesome boilerplate for a React SSR app and am trying to add Material UI for css lib. I've gone through their guide for Server Side Rendering but seem to be doing something wrong becuase I can get the button to render as shown here, however there is NO styling applied to the button :((

This is what I've done so far: In client.js

// added for Material UI
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme/sitetheme';
...
const render = (Routes: Array) => {
const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;

React.useEffect(() => {
const jssStyles = document.getElementById('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []),

renderMethod(

<ThemeProvider theme={theme}>
  <CssBaseline />
<AppContainer>
  <Provider store={store}>
    <ConnectedRouter history={history}>
      {renderRoutes(Routes)}
    </ConnectedRouter>
  </Provider>
</AppContainer>
</ThemeProvider>,
// $FlowFixMe: isn't an issue
document.getElementById('react-view')
);
};

And then in server.js

// added for Material UI
import CssBaseline from '@material-ui/core/CssBaseline';
import { ServerStyleSheets, ThemeProvider } from '@material-ui/core/styles';
import theme from './theme/sitetheme';
...
const extractor = new ChunkExtractor({ statsFile });
const sheets = new ServerStyleSheets(); // added for material-ui
const staticContext = {};
const AppComponent = (
sheets.collect(
{/* Setup React-Router server-side rendering */}

{renderRoutes(routes)}
));

  const css = sheets.toString(); // for material ui
  const initialState = store.getState();
  const htmlContent = renderToString(AppComponent);

  // head must be placed after "renderToString"
  // see: https://github.com/nfl/react-helmet#server-usage
  const head = Helmet.renderStatic();

  // Check if the render result contains a redirect, if so we need to set
  // the specific status and redirect header and end the response
  if (staticContext.url) {
    res.status(301).setHeader('Location', staticContext.url);
    res.end();

    return;
  }

  // Check page status
  const status = staticContext.status === '404' ? 404 : 200;

  // Pass the route and initial state into html template
  res
    .status(status)
    .send(renderHtml(head, extractor, htmlContent, initialState, css));

and finally in renderHtml.js

export default (
head: Object,
extractor: Function,
htmlContent: string,
initialState: Object,
css: string // added for Material UI
...

    ${extractor.getLinkTags()}
    ${extractor.getStyleTags()}
    <style id="jss-server-side">${css}</style>

I'm not exactly sure what I'm doing wrong?