Styled-component vs jss vs emotion for React

A very short answer (there is much more to it in general)

  1. CSS Template strings

SC parses template strings with CSS for at runtime.
Emotion has a babel plugin to prepare those parsed things in a format that can render final CSS at runtime faster.
JSS currently only supports basic template strings and otherwise uses objects (there are plans to add better support for template strings)

  1. Updating style rules

SC and Emotion generate new CSS rules when you update dynamic styles, JSS will update existing rules (note you can see updated rules in styles tab of dev tools, but not in the style tag): reproduction

  1. Dependency on React

SC is react only. Emotion has a syntax that can be used without react (css“). JSS has separate packages: jss (core, no react), react-jss (HOC injecting classes), styled-jss (SC like API).

  1. Plugins

Currently only JSS supports plugins.

  1. Static extraction

    Currently only Emotion supports full static extraction. JSS is working on it too.
    You can get static extraction with JSS today if you put styles into separate files (something.styles.js) and extract them using a webpack plugin (no dynamic values though).

  2. Performance

http://necolas.github.io/react-native-web/benchmarks/

  1. All of them generate actual CSS using a style tag.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)