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

import React from "react";
import PropTypes from "prop-types";
import { create } from "jss";
import JssProvider from "react-jss/lib/JssProvider";
import { createGenerateClassName, jssPreset } from "@material-ui/styles";

const styleNode = document.createElement("style");
styleNode.id = "insertion-point-jss";
document.head.insertBefore(styleNode, document.head.firstChild);

// Configure JSS
const jss = create(jssPreset());
jss.options.createGenerateClassName = createGenerateClassName;
jss.options.insertionPoint = document.getElementById("insertion-point-jss");

const CSSCascadeProvider = ({ children }) => {
  return {children};
};
CSSCascadeProvider.propTypes = {
  children: PropTypes.element
};
export default CSSCascadeProvider;

import {
  create,
  SheetsRegistry,
} from 'jss'
import { jssPreset, createGenerateClassName } from '@material-ui/styles'

// Configure JSS
const jss = create(jssPreset())
jss.options.createGenerateClassName = createGenerateClassName

export default function createContext() {
  return {
    jss,
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
  }
}

palette: { ...uiTheme.paletteColors, type: uiTheme.paletteType },
  });

  // Expose the theme as a global variable so people can play with it.
  if (process.browser) {
    window.theme = theme;
  }

  return theme;
}

const theme = getTheme(themeInitialState);

// Configure JSS
const jss = create({
  plugins: [...jssPreset().plugins, rtl()],
  insertionPoint: process.browser ? document.querySelector('#insertion-point-jss') : null,
});

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.
    }),
  };
}

import { setPrismTheme } from '../utils/prism';
import { PageContext } from '../utils/getPageContext';
import { UtilsContext } from '../_shared/UtilsServiceContext';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import { NotificationManager } from 'utils/NotificationManager';
import { Theme, createMuiTheme, CssBaseline } from '@material-ui/core';
import { ThemeProvider, jssPreset, StylesProvider } from '@material-ui/styles';
import { createUtilsService, UtilsLib, utilsMap } from '../utils/utilsService';

export type ThemeType = 'light' | 'dark';
export type Direction = Theme['direction'];

export const ThemeContext = React.createContext('light');

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const createCustomMuiTheme = (theme: ThemeType, direction: Theme['direction']) => {
  return createMuiTheme({
    direction,
    palette: {
      primary: {
        main: theme === 'dark' ? '#fdd835' : '#43a047',
      },
      secondary: orange,
      type: theme,
    },
  });
};

interface Props {
  children: React.ReactChild;

// Our theme
const theme = createMuiTheme({
  palette: {
    primary: indigo,
    secondary: blueGrey,
    highlight_idle: blueGrey[900],
    highlight_warn: orange[500],
    highlight_error: red[500],
    highlight_success: green[500],
  },
});

// JSS instance
const jss = create(jssPreset());

// this redirect forces a call to authenticationContext.refresh() which invalidates the JWT if it is invalid.
const unauthorizedRedirect = () => ;

class App extends Component {

  notistackRef = React.createRef();

  componentDidMount() {
    document.title = PROJECT_NAME;
  }

  onClickDismiss = (key) => () => {
    this.notistackRef.current.closeSnackbar(key);
  }

import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { Router as Router2, useRouter } from 'next/router';
import { StylesProvider, jssPreset } from '@material-ui/styles';
import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers';
import acceptLanguage from 'accept-language';
import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
import { create } from 'jss';
import rtl from 'jss-rtl';

// Configure JSS
const jss = create({
  plugins: [...jssPreset().plugins, rtl()],
  insertionPoint: process.browser ? document.querySelector('#insertion-point-jss') : null,
});

function useFirstRender() {
  const firstRenderRef = React.useRef(true);
  React.useEffect(() => {
    firstRenderRef.current = false;
  }, []);

  return firstRenderRef.current;
}

acceptLanguage.languages(['en', 'zh']);

function LanguageNegotiation() {
  const router = useRouter();

onContentDidMount = () => {
    this.setState({
      ready: true,
      jss: create({
        plugins: jssPreset().plugins,
        insertionPoint: this.contentWindow['demo-frame-jss'],
      }),
      sheetsManager: new Map(),
      container: this.contentDocument.body,
      window: () => this.contentWindow,
    });
  };