How to use the jss-preset-default function in jss-preset-default

import { create, SheetsRegistry } from "jss";
import preset from "jss-preset-default";
import { createMuiTheme } from "@material-ui/core/styles";
import { blue, green } from "@material-ui/core/colors";
import createGenerateClassName from "@material-ui/core/styles/createGenerateClassName";

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: green,
  },
});

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

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

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

const theme = createMuiTheme({
  palette: {
    primary: deepPurple,
    secondary: blue,
  },
});

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

function createContext() {
  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(),
  };
}

export default function getContext() {
  // Make sure to create a new store for every server-side request so that data
  // isn't shared between connections (which would be bad)

import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
// flow-disable-next-line
import globalJss from 'jss'
import jssPreset from 'jss-preset-default'
import JssProvider from 'react-jss/lib/JssProvider'
import { Provider } from 'react-redux'
import { BrowserRouter, StaticRouter } from 'react-router-dom'
import nest from 'recompose/nest'
import withProps from 'recompose/withProps'

import createSharynStore from '../redux/store'
import spread from '../util/spread'
import spreadIf from '../util/spreadIf'
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,

export { mergeSlotProps } from './utilities/mergeSlotProps';
export { compose } from './compose';

// Workaround for webpack warnings
import { IStandardProps as P } from './utilities/mergeSlotProps';
import { ForwardRefComponent as ForwardRefComponentInternal } from './compose';

export type IStandardProps = P;
export type ForwardRefComponent = ForwardRefComponentInternal;

export { ThemeContext } from './themeContext';
export { ThemeProvider } from './components/ThemeProvider/ThemeProvider';
export { Box } from './components/Box/Box';
export { createTheme } from './utilities/createTheme';

jss.setup(preset());

  jss: () => new JSSAdapter(createJSS(jssPreset())),
  typeStyle: () => new TypeStyleAdapter(new TypeStyle({ autoGenerateTag: 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 * 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 = {

export default declare((api, {identifiers, jssOptions = preset(), theme = {}}) => {
  api.assertVersion(7)

  const jss = createJss(jssOptions)

  return {
    visitor: {
      CallExpression(callPath) {
        if (!isSupportedCallIdentifier(callPath, identifiers)) return
        const stylesNode = findStylesNode(callPath)
        const styles = serializeNode(callPath, stylesNode, theme)
        const sheet = jss.createStyleSheet(styles)

        if (!sheet.toString()) return

        insertRawRule(callPath, stylesNode, sheet)
        removeNonFunctionProps(callPath, stylesNode)

const { colors: baseThemeColors } = BaseTheme;
const globalStyles = {
  '@global': {
    '*::selection': {
      backgroundColor: baseThemeColors.red.primary,
      color: baseThemeColors.white.primary,
    },
  },
};

const PresetOptions = {
  defaultUnit,
  global: globalStyles,
};
const jssInstance = create(DefaultPreset(PresetOptions));

/**
 * 1.) Compile styles and apply any plugins
 * 2.) Manually insert stylesheet into the DOM for client-side rendering
 */
const globalStyleSheet = jssInstance.createStyleSheet(globalStyles);
globalStyleSheet.attach();

const aestheticConfig = {
  extendable: false,
  pure: false,
  stylesPropName: 'classNames',
  themePropName: 'theme',
};

const aestheticInstance = new Aesthetic(