How to use the jss.setup function in jss

// @flow
import jss from 'jss'
import preset from 'jss-preset-default'

console.warn(`The JSS Starter Kit is for learning and experimentation.  It's not optimized for production deployment.

If you'd like to use JSS in production, try including the "jss" and "jss-preset-default" modules directly.  See an example at https://github.com/cssinjs/jss#example`)

jss.setup(preset())

export {jss as default, preset}

export * from 'jss'
export * from 'react-jss'

export {default as withStyles} from 'react-jss'

export {default as functions} from 'jss-plugin-rule-value-function'
export {default as observable} from 'jss-plugin-rule-value-observable'
export {default as template} from 'jss-plugin-template'
export {default as global} from 'jss-plugin-global'
export {default as extend} from 'jss-plugin-extend'
export {default as nested} from 'jss-plugin-nested'
export {default as compose} from 'jss-plugin-compose'
export {default as camelCase} from 'jss-plugin-camel-case'

import jssPreset from 'jss-preset-default'
import JssProvider from 'react-jss/lib/JssProvider'
import { Provider } from 'react-redux'
import BrowserRouter from 'react-router-dom/BrowserRouter'
import StaticRouter from 'react-router-dom/StaticRouter'
import nest from 'recompose/nest'
import withProps from 'recompose/withProps'
// flow-disable-next-line
import createSharynStore from '@sharyn/redux/store'
// flow-disable-next-line
import spread from '@sharyn/util/spread'
// flow-disable-next-line
import spreadIf from '@sharyn/util/spread-if'
import GlobalStylesProvider from './GlobalStylesProvider'

const defaultJss = globalJss.setup(jssPreset())

const Providers = ({
  children,
  App,
  theme,
  globalStyles,
  store = createSharynStore(),
  isSsr,
  url,
  jss = defaultJss,
  routerContext,
  sheetsRegistry,
}: {
  children?: any,
  App?: Function,
  store?: Object,

it('base jss instance setup shoud not affect Styleguidist styles', () => {
		jssBase.setup();

		const stylesheet = jss.createStyleSheet({
			root: {
				width: 1,
			},
		});

		expect(stylesheet.classes.root).toMatch(/^rsg--root-\d+$/);

		const root = (stylesheet.getRule('root') as any).style;
		expect(root.width).toBe('1px');
	});
});

import React from 'react'
import { parse as parseQuery } from 'qs'
import jss from 'jss'
import preset from 'jss-preset-default'
import PropTypes from 'prop-types'
import { configureAnchors } from 'react-scrollable-anchor'
import cn from 'classnames'
import Lincoln from '../Lincoln'
import { styles } from './Demo.styles'
import Overlay from '../../components/Overlay/Overlay'
import pencilIcon from '../../../assets/pencil.svg'
import globeIcon from '../../../assets/globe.svg'

jss.setup(preset())
configureAnchors({ offset: -52, scrollDuration: 200, keepLastAnchorHash: true })

const definitionUrl = parseQuery(window.location.search.split('?')[1]).url
const hash = window.location.hash

@styles
export class Demo extends React.PureComponent {
  state = {
    definitionUrl,
    showDialog: false,
    showForm: false,
    definition: '',
    useDefinition: false
  }

  useUrlInput = () => this.setState({ definitionUrl: this.urlInput.value, showDialog: false, showForm: false })

import React from 'react';
import jss from 'jss';
import preset from 'jss-preset-default';
import Logo from 'react-icons/lib/go/rocket';

jss.setup(preset());

const styles = {
  header: {
    display: 'flex',
    flexDirection: 'column',
    height: '40%',
    minHeight: 250,
    width: '100%',
    position: 'relative',
    justifyContent: 'center'
  },
  logoContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,

import * as types from '@babel/types'

import preset from 'jss-preset-default'
import jss from 'jss'
jss.setup(preset())

import { cammelCaseToDashCase, stringToCamelCase } from '../../../shared/utils/string-utils'
import {
  addJSXTagStyles,
  addExternalPropOnJsxOpeningTag,
} from '../../../shared/utils/ast-jsx-utils'
import { ParsedASTNode } from '../../../shared/utils/ast-js-utils'

import { ContentNode, StyleDefinitions } from '../../../uidl-definitions/types'

export const splitDynamicAndStaticProps = (style: Record) => {
  return Object.keys(style).reduce(
    (acc: { staticStyles: Record; dynamicStyles: Record }, key) => {
      const value = style[key]
      if (typeof value === 'string' && value.startsWith('$props.')) {
        acc.dynamicStyles[key] = value.replace('$props.', '')

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import Moment from 'moment'

import cn from 'classnames'

import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())

import { Keys, Levels, Units, Types } from './constants'
import Calendar from './calendar'
import createStyledComponent from './styled-component'
import getStyle from './styles'

const ISOregex = /((\d{4}\-\d\d\-\d\d)[tT]([\d:\.]*)?)([zZ]|([+\-])(\d\d):?(\d\d))/
const minutesOfDay = m => {
  return Moment(m).minutes() + Moment(m).hours() * 60
}

class Kronos extends Component {
  constructor(props) {
    super(props)

    this.state = {

import jss from 'jss'
import jssPresetDefault from 'jss-preset-default'

jss.setup(jssPresetDefault())

function styleObject(obj) {
	var styles = {
		'@global': {
			'html': {
				border: '1px solid '+obj['app-border']
			},
			'body': {
				background: obj['fixed-sidebar-background']
			},
			'::-webkit-scrollbar-thumb': {
				backgroundColor: obj['scrollbar-thumb'],
				border         : '1px solid '+obj['scrollbar-thumb-border']
			},
			'::-webkit-scrollbar-thumb:hover': {
				backgroundColor: obj['scrollbar-thumb']

import React, { Component } from 'react'
//import Swipe from 'react-easy-swipe'
import {Motion, spring} from 'react-motion'
import jss from 'jss'
import preset from 'jss-preset-default'
import Button from './Button'
import insertBlock from 'draft-js-editor/lib/modifiers/insertBlock'

jss.setup(preset())

const sheet = jss.createStyleSheet({
  sideMenu: {
    position: 'fixed',
    //position: 'relative',
    left: 0,
    top: 0,
    width: 200,
    height: '100vh',
    backgroundColor: 'red',
  },
  contents: {
  	width: '100vw',
  	position: 'fixed',
  	left: 0,
  	top: 0,

import jss from 'jss'
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}`)