How to use the jss.createStyleSheet function in jss

import styles from './styles';
import jss from 'jss';
import nested from 'jss-nested'

jss.use(nested());

const { classes } = jss.createStyleSheet(styles).attach();

// classes // {button: '.button--jss-0-0 ', ctaButton: '.ctaButton--jss-0-2'}

document.body.innerHTML = `
  <button class="${classes.button}">Button</button>
  <br>
  <button class="${classes.ctaButton}">CTA Button</button>
  <p class="${classes.p}">Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
`;

export const createCSSClass = (className: string, styleObject: Record) => {
  return jss
    .createStyleSheet(
      {
        [`.${className}`]: styleObject,
      },
      {
        generateId: () => className,
      }
    )
    .toString()
}

export default memoize((styles, config, componentName) => {
	const mergedTheme = merge(theme, config.theme);
	const mergedStyles = merge(
		styles(mergedTheme),
		config.styles && config.styles[componentName]
	);
	const sheet = jss.createStyleSheet(mergedStyles, { meta: componentName }).attach();
	sheets.add(sheet);
	return sheet.classes;
});

module.exports = function (key, rules) {
    var jss = require('jss');

    if (!key) return;
    if (!cache[key]) {
        var sheet = jss.createStyleSheet(rules, {named: false});
        sheet.attach();
        cache[key] = true;
    }
};

a: {
      color: theme.color04,
      textDecoration: 'underline',
      cursor: 'pointer',
      '&:hover': {
        color: theme.color05,
      },
    },
    canvas: {
      display: 'block',
    },
  },
};

jss.setup(preset());
jss.createStyleSheet(styles, { meta: __filename }).attach();

import jssPreset from 'jss-preset-default'
import { useComputed, observer } from 'mobx-react-lite'
import { StoreContext } from '@client/index'

const styles = {
  '@global': {
    h1: config.markdownTheme.h1,
    h2: config.markdownTheme.h2,
    h3: config.markdownTheme.h3,
    p: config.markdownTheme.p,
    li: config.markdownTheme.li
  }
}

jss.setup(jssPreset())
jss.createStyleSheet(styles as any).attach()

export const App = observer(() => {
  const store = React.useContext(StoreContext)
  const currentPage: JSX.Element = useComputed(() => {
    switch (store.viewStore.currentPage) {
      case AppPage.Home:
        return 
      case AppPage.ComponentsDemos:
        return 
      case AppPage.ServerApiDemo:
        return 
      case AppPage.HooksDemo:
        return 
      default:
        throw new Error(`Unknown page ${store.viewStore.currentPage}`)
    }

function attach(rules, options) {
    return jss.createStyleSheet(rules, options).attach()
  }

const ringSheet = jss.createStyleSheet({
    ...Array.apply(null, Array(depth + 1)).map((v, k) => k)
      .reduce((rules, idx) => ({
        ...rules,
        ['ring-' + idx]: { },
        ['labels-' + idx]: { }
      }), {})
  });

  const rings = ringSheet.classes;

  const trName = props.transitionName;
  const labelTrName = props.labelTransitionName;

  const ringTransitionSheet = jss.createStyleSheet({
    ...Array.apply(null, Array(depth + 1)).map((v, k) => k)
      .reduce((rules, idx) => ({
        ...rules,
        [`.${trName}-appear.${rings['ring-' + idx]}`]: {
          transform: 'scale(0.5)'
        },
        [`.${trName}-appear.${trName}-appear-active.${rings['ring-' + idx]}`]: {
          transform: 'scale(1)',
          transition: `transform 0.5s ease-out ${(idx / 5)}s`
        },
        [`.${trName}-enter.${rings['ring-' + idx]}`]: {
          transform: 'scale(0.5)'
        },
        [`.${trName}-enter.${trName}-enter-active.${rings['ring-' + idx]}`]: {
          transform: 'scale(1)',
          transition: `transform 0.5s ease-out ${(idx / 5)}s`

.add('JSS naked', () => {
    const sheetsRegistry = new SheetsRegistry();

    const staticStyles = cssObject;
    const dynamicStyles = getDynamicStyles(staticStyles);

    const staticSheet = jss.createStyleSheet(staticStyles);
    staticSheet.attach({
      link: false,
    });
    sheetsRegistry.add(staticSheet);

    if (dynamicStyles) {
      const dynamicSheet = jss.createStyleSheet(dynamicStyles, {
        link: true,
      });
      dynamicSheet.update({}).attach();
      sheetsRegistry.add(dynamicSheet);
    }

    ReactDOMServer.renderToString(
      
        {Array.from(new Array(5)).map((_, index) => (
          <button type="submit">
            Material-UI
          </button>
        ))}
      ,
    );
    sheetsRegistry.toString();

import React, { Component, PropTypes } from 'react';
import shouldPureComponentUpdate from 'react-pure-render/function';
import getSliceRadius from './getSliceRadius';
import Slice from './Slice';
import getColor from './getColor';
import jss from 'jss';
import classNames from 'classnames';

const sheet = jss.createStyleSheet({
  slice: {

  },
  sliceActive: {
    cursor: 'pointer'
  }
}).attach();

export default class Ring extends Component {
  static propTypes = {
    stroke: Slice.propTypes.stroke,
    strokeWidth: Slice.propTypes.strokeWidth,
    sliceRadius: Slice.propTypes.sliceRadius,
    onClick: Slice.propTypes.onClick,

    level: PropTypes.number.isRequired,