How to use jss-preset-default - 10 common examples

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());

module.exports.init = function () {
  /* eslint-disable global-require */
  const Vue = require('vue').default
  const Vuex = require('vuex').default
  Vue.use(Vuex)
  module.exports = {Vue, Vuex}

  module.exports.h = require('hyperscript')

  module.exports.moment = require('moment')

  const jss = require('jss').default
  jss.setup(require('jss-preset-default').default())
  const jssopts = {classNamePrefix: 'WikiMonkey-'}

  module.exports.jssc = (style) => jss.createStyleSheet(style, jssopts).attach()

  module.exports.styled = require('@kynikos/vue-styled-jss')(jss, jssopts)

  // Clipboard.js doesn't import well with Browserify
  // https://github.com/zenorocha/clipboard.js/issues/535
  // module.exports.ClipboardJS = require('clipboard')
  module.exports.ClipboardJS = require('clipboard/dist/clipboard.min')

  const language = require('element-ui/lib/locale/lang/en').default
  const locale = require('element-ui/lib/locale').default
  locale.use(language)
  require('%/app/element.sass')
  Vue.use(require('element-ui/lib/autocomplete').default)

  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)