Material-UIのクラス名JSSが合わない

#発生している問題
Material-UIのwithstyleを使ってスタイリングしたjssクラス名が合致しない．

<head>
  <style data-jss="" data-meta="makeStyles">
  .jss1 {
    flex-grow: 1;
  }
  .jss3 {
    flex-grow: 1;
  }
  </style>
  <style data-jss="" data-meta="makeStyles">
  .jss108 {
    z-index: 0;
    overflow: hidden;
    position: relative;
    background: url(/src/views/img/head.jpg) no-repeat center;
    background-size: cover;
  }
  .jss108:before {
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    filter: blur(5px);
    content: ;
    z-index: -1;
    position: absolute;
    background: inherit;
  }
  </style>
<head>

html
1<div class="jss1"><div class="jss3">...<div><div>
2<div class="jss98"><div><!-- なぜかここのクラス名がjss108にならない -->

#環境
NodeでフレームワークExpressを使ってTypescriptで書かれたReactをSSRしている状態にあります．（ここでもSSRしたhtmlのheadにjssのスタイルがないなど問題あり）

#構成
#####サーバーサイドレンダリング

sampleController
1import * as express from 'express';
2...
3
4export default (req: express.Request, res: express.Response)  => {
5    const header = renderToString(React.createElement(Header));
6    const headnav = renderToString(React.createElement(HeadNav));
7
8    //cssの生html取得
9    const sheets = new ServerStyleSheets();
10    renderToString(
11      sheets.collect(
12        React.createElement(Header),
13        React.createElement(HeadNav)
14      )
15    );
16    const css = sheets.toString();
17
18    res.send(
19      html({
20         css, header, headnav
21      })
22    );
23}
24

html
1const html = ( { css, header, headnav }: { css: string, header: string, headnav: string } ) => `
2  <!DOCTYPE html>
3  <html>
4    <head>
5      ...
6      <style>${css}</style>
7      ...
8    </head>
9    <body style="margin:0">
10      <div id="header">${header}</div>
11      <div id="headnav">${headnav}</div>
12    </body>
13    <script src="js/bundle.js" defer></script>
14  </html>
15`;
16
17export default html;
18

#####クライアントサイドレンダリング

index
1import React from "react";
2...
3
4ReactDOM.hydrate(
5    <Header />,
6    document.getElementById("header")
7);
8
9ReactDOM.hydrate(
10    <HeadNav />,
11    document.getElementById("headnav")
12);
13
14ReactDOM.hydrate(
15    <Root compiler="TypeScript" framework="Express" library="React" />,
16    document.getElementById("root")
17);
18

#####Header, HeadNavコンポーネント

Header
1import React from 'react';
2import { AppBar, Toolbar, Typography, IconButton, createStyles, withStyles, WithStyles } from '@material-ui/core';
3import MenuIcon from '@material-ui/icons/Menu';
4
5const styles = createStyles({
6  root: {
7    flexGrow: 1,
8  },
9  menuButton: {
10  },
11  title: {
12    flexGrow: 1,
13  },
14});
15
16interface Props extends WithStyles<typeof styles> {
17}
18
19class Header extends React.Component<Props, {}> {
20  render() {
21    const { classes } = this.props;
22    return (
23      <div className={classes.root}>
24        <AppBar position="static">
25          <Toolbar>
26            <Typography variant="h6" className={classes.title}>
27              Title
28            </Typography>
29            <IconButton edge="end" className={classes.menuButton} color="inherit" aria-label="menu">
30              <MenuIcon />
31            </IconButton>
32          </Toolbar>
33        </AppBar>
34      </div>
35    );
36  }
37}
38
39export default withStyles(styles)(Header);
40

HeadNav
1import React from 'react';
2import { createStyles, withStyles, WithStyles } from '@material-ui/core';
3
4import HeadImg from '../img/head.jpg';
5
6const styles = createStyles({
7  blur: {
8    background: `url(${HeadImg}) no-repeat center`,
9    backgroundSize: 'cover',
10    position: 'relative',
11    zIndex: 0,
12    overflow: 'hidden',
13    '&:before': {
14      content: '',
15      background: 'inherit',
16      filter: 'blur(5px)',
17      position: 'absolute',
18      top: '-5px',
19      left: '-5px',
20      right: '-5px',
21      bottom: '-5px',
22      zIndex: -1,
23    }
24  }
25});
26
27interface Props extends WithStyles<typeof styles> {
28}
29
30const HeadNav: React.FunctionComponent<Props> = (props) => {
31  const { classes } = props;
32  return (
33    <div className={classes.blur}>
34      モザイクもざいく
35    </div>
36  );
37};
38
39export default withStyles(styles)(HeadNav);
40