How to use jss - 10 common examples

fontFamily: 'Roboto',
		color: '#FFFFFF',
	},
	rule2: {
		fontFamily: 'Inconsolata',
		fontSize: 17,
	},
});
// $ExpectError
styleSheet.addRule('badProperty', { thisIsNotAValidProperty: 'blah', });

styleSheet.addRule('badValue', { // $ExpectError
	'align-items': Symbol(),
});

const styleSheet2 = sharedInstance.createStyleSheet({
	container: {
		background: '#000099',
	}
});

styleSheet2.classes.container; // $ExpectType string
styleSheet2.classes.notAValidKey; // $ExpectError

/* SheetsRegistry test */
const sheetsRegistry = new SheetsRegistry();
sheetsRegistry.add(styleSheet);

const secondStyleSheet = jss.createStyleSheet(
	{
		ruleWithMockObservable: {
			subscribe() {

// @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'

/**
 * JSS-related routines.
 * @module boram/jss
 */

import jss from "jss";
import global from "jss-global";
import extend from "jss-extend";
import nested from "jss-nested";
import camelCase from "jss-camel-case";
import defaultUnit from "jss-default-unit";

// Plugins used across application.
jss.use(global(), extend(), nested(), camelCase(), defaultUnit());

/** Application components should use that reexport. */
export {jss};
export default jss;

/**
 * Similar to `injectSheet` from react-jss but don't create wrapper
 * component and attach styles immediately.
 *
 * Note that API of this decorator is slightly different.
 */
export function useSheet(styles) {
  const sheet = jss.createStyleSheet(styles).attach();
  return function(target) {
    // Normal component.
    if (target.prototype.render) {

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

function createPageContext() {
  return {
    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(),
    // The standard class name generator.
    generateClassName: createGenerateClassName(),
  };
}

function createPageContext () {
    return {
        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(),
        // The standard class name generator.
        generateClassName: createGenerateClassName(),
    }
}