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

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 {
    jss,
    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(),
    generateClassName: createGenerateClassName({
      productionPrefix: 'j', // Reduce the bandwidth usage.
    }),
  };
}

export default function(): PageContext {
  return {
    // 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(),
  };
}

export default function(): PageContext {
  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(),
    children: undefined,
  };
}

function renderStyledFunction(req, res) {
  const sheetsRegistry = new SheetsRegistry();
  const html = ReactDOMServer.renderToString(
    
      {Array.from(new Array(1000)).map((_, index) => (
        
      ))}
    ,
  );
  const css = sheetsRegistry.toString();
  res.send(renderFullPage(html, css));
}

* @author Aeneas Rekkas 
 *
 */
import * as React from 'react';

import { createMuiTheme, Theme } from '@material-ui/core/styles';
import {
  ThemeProvider as MaterialUiThemeProvider,
  StylesProvider
} from '@material-ui/styles';
import { createGenerateClassName } from '@material-ui/styles';
import darkTheme from './DarkTheme/index';
import { themeOptions } from './themeOptions';
export { darkTheme };

const generateClassName = createGenerateClassName({
  disableGlobal: true,
  productionPrefix: 'ory',
});
const theme = createMuiTheme(themeOptions);

export interface ThemeProviderProps {
  theme?: Theme;
}

class ThemeProvider extends React.Component {
  render() {
    return (
      
        
          {this.props.children}

function renderAvatar(req, res) {
  const sheetsRegistry = new SheetsRegistry();
  const html = ReactDOMServer.renderToString(
    
      {Array.from(new Array(1)).map((_, index) => (
        Avatar
      ))}
    ,
  );
  const css = sheetsRegistry.toString();
  res.send(renderFullPage(html, css));
}

function renderBox(req, res) {
  const sheetsRegistry = new SheetsRegistry();
  const html = ReactDOMServer.renderToString(
    
      
        {Array.from(new Array(1000)).map((_, index) => (
          
        ))}
      
    ,
  );
  const css = sheetsRegistry.toString();
  res.send(renderFullPage(html, css));
}