jss

JSS

Repo – Docs

// app.js
import injectSheet from 'react-jss';

const styles = {
  container: {
    margin: '0 auto',
    width: '100%',
    '@media screen and (min-width: 360px)': {
      maxWidth: '400px',
    },
    '@media screen and (min-width: 600px)': {
      maxWidth: '600px',
    },
  },
};

const App = (props) => (
  <div className={props.sheet.classes.container}>
    <Tweet data={data} />
  </div>
);

export default injectSheet(styles)(App);

Checklist

• ✅ No build requirements
• ✅ Small and lightweight
• 😕 Supports global CSS (requires separate setup)
• ✅ Supports entirety of CSS
• ✅ Colocated
• ✅ Isolated
• ✅ Doesn’t break inline styles
• 😕 Easy to override (inline styles, but no standard mechanism)
• ❌ Theming
• ❌ Pre-build
• ✅ Server side rendering
• ❌ No wrapper components
• ❌ ReactNative support

_{Legend: ✅ = Yes, ❌ = No, 😕 = Kinda, refer to notes or parentheses}

Notes

• Has plugin system
• Supports all selectors (nesting, children, siblings,…), requires custom '&selector' notation though (e.g. '&:hover', & div)