How to use the jss.use function in jss

/**
 * 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) {

import React, { Component } from 'react';
import useSheet from 'react-jss';
import jss from 'jss';
import extend from 'jss-extend';

// Setup jss plugins.
jss.use(extend());
import styles from './styles';

import Button from '../Button';

class Profile extends Component {
  static propTypes = {
    avatarUrl: React.PropTypes.string.isRequired,
    firstName: React.PropTypes.string.isRequired,
    lastName: React.PropTypes.string,
    username: React.PropTypes.string.isRequired,
    bio: React.PropTypes.string,
  };

  onAddFriend = () => {
    alert(`Add @${this.props.username} as a friend`); // eslint-disable-line no-alert
  };

import React, { PropTypes } from 'react';
import useSheet from 'react-jss';
import jss from 'jss';
import extend from 'jss-extend';

// Setup jss plugins.
jss.use(extend());

import styles from './styles';

const Button = (props) => (
  <button>
);

Button.propTypes = {
  children: PropTypes.node.isRequired,</button>

import jss from 'jss';
import * as jssGlobal from 'jss-global';
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import 'typeface-roboto';
import 'typeface-roboto-mono';

import { Page } from './view/Page';
import { ThemeProvider } from './view/ThemeProvider';

jss
  .use(jssGlobal.default())
  .createStyleSheet({
    // TODO: Cast this to any since the @types/jss seemed to not like this type for some reason
    '@global': {
      body: {
        margin: 0,
      },
    } as any,
  })
  .attach();
render(
  
    
      
    
  ,

// @flow
import jss from 'jss';
import jssVendorPrefixer from 'jss-vendor-prefixer';
import jssNested from 'jss-nested';
import { createStyling } from 'react-base16-styling';
import rgba from 'hex-rgba';
import inspector from '../themes/inspector';
import * as reduxThemes from 'redux-devtools-themes';
import * as inspectorThemes from '../themes';

jss.use(jssVendorPrefixer());
jss.use(jssNested());


const colorMap = theme => ({
  TEXT_COLOR: theme.base06,
  TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
  BACKGROUND_COLOR: theme.base00,
  SELECTED_BACKGROUND_COLOR: rgba(theme.base03, 20),
  SKIPPED_BACKGROUND_COLOR: rgba(theme.base03, 10),
  HEADER_BACKGROUND_COLOR: rgba(theme.base03, 30),
  HEADER_BORDER_COLOR: rgba(theme.base03, 20),
  BORDER_COLOR: rgba(theme.base03, 50),
  LIST_BORDER_COLOR: rgba(theme.base03, 50),
  ACTION_TIME_BACK_COLOR: rgba(theme.base03, 20),
  ACTION_TIME_COLOR: theme.base04,
  PIN_COLOR: theme.base04,
  ITEM_HINT_COLOR: rgba(theme.base0F, 90),

// @flow
import jss from 'jss';
import jssVendorPrefixer from 'jss-vendor-prefixer';
import jssNested from 'jss-nested';
import { createStyling } from 'react-base16-styling';
import rgba from 'hex-rgba';
import inspector from '../themes/inspector';
import * as reduxThemes from 'redux-devtools-themes';
import * as inspectorThemes from '../themes';

jss.use(jssVendorPrefixer());
jss.use(jssNested());


const colorMap = theme => ({
  TEXT_COLOR: theme.base06,
  TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
  BACKGROUND_COLOR: theme.base00,
  SELECTED_BACKGROUND_COLOR: rgba(theme.base03, 20),
  SKIPPED_BACKGROUND_COLOR: rgba(theme.base03, 10),
  HEADER_BACKGROUND_COLOR: rgba(theme.base03, 30),
  HEADER_BORDER_COLOR: rgba(theme.base03, 20),
  BORDER_COLOR: rgba(theme.base03, 50),
  LIST_BORDER_COLOR: rgba(theme.base03, 50),
  ACTION_TIME_BACK_COLOR: rgba(theme.base03, 20),
  ACTION_TIME_COLOR: theme.base04,
  PIN_COLOR: theme.base04,

var jss = require('jss');
var extend = require('jss-extend');
var nested = require('jss-nested');
var camelCase = require('jss-camel-case');
var defaultUnit = require('jss-default-unit');

var perdido = require('perdido');

jss.use(extend());
jss.use(nested());
jss.use(camelCase());
jss.use(defaultUnit());

var testGrid = {
  article: {
    extend: perdido.flexContainer('row'),
    '& div': {
      extend: perdido.column('1/3'),
    },
  },
};


var styleSheet = jss.createStyleSheet(testGrid, {named: false});

styleSheet.toString();

var jss = require('jss');
var extend = require('jss-extend');
var nested = require('jss-nested');
var camelCase = require('jss-camel-case');
var defaultUnit = require('jss-default-unit');

var perdido = require('perdido');

jss.use(extend());
jss.use(nested());
jss.use(camelCase());
jss.use(defaultUnit());

var testGrid = {
  article: {
    extend: perdido.flexContainer('row'),
    '& div': {
      extend: perdido.column('1/3'),
    },
  },
};


var styleSheet = jss.createStyleSheet(testGrid, {named: false});

styleSheet.toString();

import jss from 'jss';
import jssVendorPrefixer from 'jss-vendor-prefixer';
import jssNested from 'jss-nested';
import { createStyling } from 'react-base16-styling';
import rgba from 'hex-rgba';
import inspector from '../themes/inspector';
import * as reduxThemes from 'redux-devtools-themes';
import * as inspectorThemes from '../themes';

jss.use(jssVendorPrefixer());
jss.use(jssNested());


const colorMap = theme => ({
  TEXT_COLOR: theme.base06,
  TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
  BACKGROUND_COLOR: theme.base00,
  SELECTED_BACKGROUND_COLOR: rgba(theme.base03, 20),
  SKIPPED_BACKGROUND_COLOR: rgba(theme.base03, 10),
  HEADER_BACKGROUND_COLOR: rgba(theme.base03, 30),
  HEADER_BORDER_COLOR: rgba(theme.base03, 20),
  BORDER_COLOR: rgba(theme.base03, 50),
  LIST_BORDER_COLOR: rgba(theme.base03, 50),
  ACTION_TIME_BACK_COLOR: rgba(theme.base03, 20),
  ACTION_TIME_COLOR: theme.base04,
  PIN_COLOR: theme.base04,
  ITEM_HINT_COLOR: rgba(theme.base0F, 90),

import jss from 'jss';
import jssVendorPrefixer from 'jss-vendor-prefixer';
import jssPx from 'jss-px';
import jssNested from 'jss-nested';
import jssCamelCase from 'jss-camel-case';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import promise from 'redux-promise';

jss.use(jssVendorPrefixer());
jss.use(jssPx());
jss.use(jssNested());
jss.use(jssCamelCase());

const createStoreWithMiddleware = applyMiddleware(
  thunk,
  promise,
  createLogger()
)(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);