How to use the jss.create function in jss

// @flow
import {create as createJss} from 'jss'
import preset from 'jss-preset-default'
import type {Jss} from 'jss'
// eslint-disable-next-line no-unused-vars
import type {Css, StyleArg} from './types'

// I have been trying to benchmark and I have seen a slow down after about 10k rules.
// Since we are in a single sheet mode, user shouldn't care about this.
const MAX_RULES_PER_SHEET = 10000

const defaultJss = createJss(preset())

const createCss = (jss: Jss = defaultJss): Css => {
  const cache = new Map()
  let ruleIndex = 0
  let sheet

  const getSheet = () => {
    if (!sheet || sheet.rules.index.length > MAX_RULES_PER_SHEET) {
      sheet = jss.createStyleSheet().attach()
    }
    return sheet
  }

  function css(/* :: ..._: StyleArg[] */): string {
    // eslint-disable-next-line prefer-rest-params
    const args = arguments

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;

// Apollo
import { ApolloProvider } from 'react-apollo';
import makeClient from 'lib/apollo';

// MUI
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import createPalette from 'material-ui/styles/createPalette';
import { blue, pink } from 'material-ui/colors';
import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import preset from 'jss-preset-default';
import { createGenerateClassName } from 'material-ui/styles';

const generateClassName = createGenerateClassName();
const jss = create(preset());
jss.options.insertionPoint = document.getElementById('jss-insertion-point');

const client = makeClient(process.env.REACT_APP_CIRCUIT_URI + '/query');
const theme = createMuiTheme({
  palette: createPalette({
    primary: blue,
    secondary: pink,
    type: 'light',
  }),
});

ReactDOM.render(

import React from 'react';

import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';

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

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

export function RTLSupport({ children }) {
  return (
    
      {React.Children.only(children)}
    
  );
}

export default RTLSupport;

import { create, SheetsRegistry } from 'jss';
import preset from 'jss-preset-default';
import { createMuiTheme } from 'material-ui/styles';
import { indigo, green } from 'material-ui/colors';
import createGenerateClassName from 'material-ui/styles/createGenerateClassName';

const theme = createMuiTheme({
  palette: {
    primary: indigo['A500'],
    secondary: green,
  },
});

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

export const sheetsManager = new Map();

export default function createContext() {
  return {
    jss,
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager,
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
  };
}

import { IApplicationState } from "./arakat-frontend/src/store";
import { IAuthenticationState } from "./arakat-frontend/src/store/authentication/types";
import LoginView from "./arakat-frontend/src/views/login";
import MainView from "./arakat-frontend/src/views/main";



export interface IAppState {
  location: Location;
  locale: ILocalizationLanguage;
  authentication?: IAuthenticationState;
}

type AllTypes = IAppState & RouteComponentProps;
const test: any = jssPreset().plugins;
const jss: any = create({ plugins: [...test, rtl()] });

const generateClassName: any = createGenerateClassName();

const getTheme: (locale: ILocalizationLanguage) => Theme = (
  locale: ILocalizationLanguage,
) => {
  const theme: Theme = createMuiTheme({
    direction: locale.rtl ? "rtl" : "ltr",
    overrides: {
      MuiAppBar: {
        colorPrimary: {
          backgroundColor: "#fafafa",
        },
        root: {
          padding: 0,
        },

benchmark('JSS + Plugin', () => {
    const jss = create()
    jss.use(jssExpand())
    jss.createStyleSheet(styles, {named: false}).toString()
  })
})

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

export function JssProvider (props) {
  const [{ jss, manager }] = useState({
    jss: create(defaultPreset()),
    manager: new SheetsManager()
  })

  const createSheet = (styles, themeID, theme, inputs) => {
    const sheetMeta = createSheetMeta(styles, themeID, inputs)
    return createUnifiedSheet(sheetMeta, jss, manager, props.registry, styles, theme, props.sheetOptions || {})
  }

  return (
    
      {props.children}
    
  )
}

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