How to use the @material-ui/core/styles.createGenerateClassName function in @material-ui/core

function createPageContext() {
  return {
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager: new Map(),
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
    // The standard class name generator.
    generateClassName: createGenerateClassName()
  };
}

renderToHtml: (render, Comp, meta) => {
    // Create a sheetsRegistry instance.
    const sheetsRegistry = new SheetsRegistry()

    // Create a MUI theme instance.
    const muiTheme = createMuiTheme(theme)

    const generateClassName = createGenerateClassName()

    const html = render(
      
        
          
        
      
    )

    meta.jssStyles = sheetsRegistry.toString()

    return html
  },
  Document: class CustomHtml extends Component {

h5: string,
  },
};

type State = {
  appName: string,
  drawerOpened: boolean,
  drawerMenus: Array<menu>,
};
// #endregion

// #region constants
const { menus } = appConfig.drawer;
const { APP_NAME } = appConfig;
// we need it to avoid prod bundle style mess ('case code splitting and lazy loading with jss)
const generateClassName = createGenerateClassName({
  dangerouslyUseGlobalCSS: true,
  productionPrefix: 'stupid-jss',
});
const jss = create(jssPreset());
// #endregion

// #region withMainLayout HOC
function withMainLayout() {
  return BaseComponent =&gt; {
    // #region returned Component
    class WithMainLayout extends Component {
      state = {
        appName: APP_NAME,
        drawerOpened: false,
        drawerMenus: menus,
      };</menu>

function createPageContext() {
  return {
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager: new Map(),
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
    // The standard class name generator.
    generateClassName: createGenerateClassName(),
  };
}

function createPageContext() {
  return {
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager: new Map(),
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
    // The standard class name generator.
    generateClassName: createGenerateClassName(),
  };
}

function createPageContext() {
  return {
    theme,
    sheetsManager: new Map(),
    sheetsRegistry: new SheetsRegistry(),
    generateClassName: createGenerateClassName(),
  };
}

function createPageContext() {
  return {
    theme,
    sheetsManager: new Map(),
    sheetsRegistry: new SheetsRegistry(),
    generateClassName: createGenerateClassName(),
  };
}

//import store
const imported = importStore(ElectronStore);
const store = Store.create(imported);

//export store
onSnapshot(store, snapshot => {
  let nextStore = toJS(snapshot);
  ElectronStore.store = exportStore(nextStore);
});

startRouter(store.router, routes);

//material ui
const styleNode = document.createComment('insertion-point-jss');
document.head.insertBefore(styleNode, document.head.firstChild);
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
jss.options.insertionPoint = 'insertion-point-jss';

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

import { ILocalizationLanguage } from "./localization/languages";
import {IApplicationState} from "./store";
import { getTheme } from "./theme";
import MainView from "./views/main";

export interface IAppState {
  location: Location;
  locale: ILocalizationLanguage;
  theme: ITheme;
}

type AllTypes = IAppState & RouteComponentProps ;

const preset: any = jssPreset().plugins;
const jss: any = create({ plugins: [...preset, rtl()] });
const generateClassName: any = createGenerateClassName();

const app: React.SFC  = (props: AllTypes) => {
  document.body.setAttribute("dir", props.locale.rtl ? "rtl" : "ltr");
  return (