react-jss

What is react-jss?

react-jss is a library that allows you to use JSS (JavaScript Style Sheets) with React. It provides a way to style React components using JavaScript objects, enabling dynamic styling and theming capabilities.

What are react-jss's main functionalities?

Basic Styling

This feature allows you to define styles using JavaScript objects and apply them to React components. The `createUseStyles` function is used to create a hook that generates the necessary CSS classes.

const useStyles = createUseStyles({
  button: {
    background: 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  }
});

function MyButton() {
  const classes = useStyles();
  return <button className={classes.button}>Click Me</button>;
}

Theming

Theming allows you to define a theme object and use it to style your components. This makes it easy to apply consistent styling across your application and switch themes dynamically.

const theme = {
  primaryColor: 'blue',
  secondaryColor: 'green'
};

const useStyles = createUseStyles({
  button: {
    background: ({ theme }) => theme.primaryColor,
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  }
});

function MyButton() {
  const classes = useStyles({ theme });
  return <button className={classes.button}>Click Me</button>;
}

Dynamic Styling

Dynamic styling allows you to change styles based on component props or state. This example shows how to change the button's background color based on the `isPrimary` prop.

const useStyles = createUseStyles({
  button: {
    background: ({ isPrimary }) => (isPrimary ? 'blue' : 'gray'),
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  }
});

function MyButton({ isPrimary }) {
  const classes = useStyles({ isPrimary });
  return <button className={classes.button}>Click Me</button>;
}

Other packages similar to react-jss

styled-components

styled-components is a library for styling React components using tagged template literals. It allows you to write actual CSS code to style your components and supports theming and dynamic styling. Compared to react-jss, styled-components uses a different syntax and approach but offers similar capabilities.

emotion

emotion is a library designed for writing CSS styles with JavaScript. It provides both a CSS-in-JS solution and a styled-components-like API. Emotion is known for its performance and flexibility, making it a strong alternative to react-jss.

aphrodite

aphrodite is a library for styling React components using JavaScript objects. It focuses on performance and ease of use, similar to react-jss. Aphrodite generates atomic CSS classes to minimize style recalculations and reflows.

README


React integration of JSS

There is a number of benefits when using react-jss instead of JSS directly:

• Lazy evaluation - sheet is created only when component will mount.
• Auto attach/detach - sheet will be rendered to the dom when component is about to mount and will be removed when no element needs it.
• A sheet gets shared between all elements.
• You want to use it with React Hot Loader.

Also you may need this module if you build a big application where leaving all styles in the DOM or compiling all styles at once may have a performance overhead or you are going to hit IE limits.

Usage

You can use it as a higher-order component to inject JSS. It can act both as a simple wrapping function and as a ES7 decorator.

React JSS wraps your React component and injects props.sheet, which is just a regular JSS style sheet, as a prop into your component. This is a common pattern that is used for composition in React instead of mixins, and works equally well with old-style createClass classes, as well as the ES6 classes.

Because JSS class names are namespaced by default, you will need to reach into this.props.sheet.classes to get their real names. For example, if you define a button class in your JSS stylesheet, its real name will be available as props.sheet.classes.button.

By default react-jss comes with jss and presets.

import React from 'react'
import injectSheet from 'react-jss'

const styles = {
  button: {
    backgroundColor: 'yellow'
  },
  label: {
    fontWeight: 'bold'
  }
}

const Button = ({sheet: {classes}, children}) => (
  <button className={classes.button}>
    <span className={classes.label}>
      {children}
    </span>
  </button>
)

export default injectSheet(styles)(Button)

Custom setup.

If you want to specify a jss version and plugins to use, you should create your own jss instance, setup plugins and create a injectSheet function which has your jss version bound.

import {create as createJss} from 'jss'
import {create as createInjectSheet} from 'react-jss'
import vendorPrefixer from 'jss-vendor-prefixer'

const jss = createJss()
jss.use(vendorPrefixer())

export const injectSheet = createInjectSheet(jss)

You can also access the Jss instance being used by default.

import {jss} from 'react-jss'

Using decorators.

You can use ES7 with decorators (using babel-plugin-transform-decorators-legacy).

import React, {Component} from 'react'
import injectSheet from 'react-jss'

const styles = {
  button: {
    backgroundColor: 'yellow'
  },
  label: {
    fontWeight: 'bold'
  }
}

@injectSheet(styles)
export default class Button extends Component {
  render() {
    const {sheet: {classes}, children} = this.props
    return (
      <button className={classes.button}>
        <span className={classes.label}>
          {children}
        </span>
      </button>
    )
  }
}

Using classNames helper.

You can use classNames together with JSS same way you do it with global CSS.

import classNames from 'classnames'

const Component = ({sheet: {classes}, children, isActive}) => (
  <div
    className={classNames({
      [classes.normal]: true,
      [classes.active]: isActive
    })}>
    {children}
  </div>
)

Installation.

npm install --save react-jss

License

MIT