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 JSS

This mixin makes JSS easy to use from React components. Classes are always namespaced so use this.sheet.classes to access their names. Stylesheet is only attached until last instance is unmounted.

This mixin is compatible with live reloading via React Hot Loader.

Example

// buttonStyle.js
module.exports = {
  'button': {
    'background-color': 'yellow'
  }
};

// Button.jsx
var React = require('react'),
    useSheet = require('react-jss'),
    buttonStyle = require('./buttonStyle');

var Button = React.createClass({
  mixins: [useSheet(buttonStyle)],

  render() {
    // JSS sheet is available as this.sheet:
    return (
      <button className={this.sheet.classes.button}>
        {this.props.children}
      </button>
    );
  }
});

module.exports = Button;

License

MIT