Styled Components 💅

Adam Recvlohe

A Short Time Ago in a React Component Not Far Far Away

Style Attribute

Style Attribute

⇒ Componentized styling

⇒ One location

⇒ Highest specificity

⇒ No support for media queries

⇒ No support for pseudo selectors

⇒ No support for child selectors

CSS in JS

⇒ Aphrodite

⇒ JSS

⇒ Radium

⇒ Etc

Don't reinvent the wheel!

- No JS Developer Ever

CSS-in-JS

⇒ Inline styles

⇒ Support for pseudo selectors

⇒ No support for child selectors

CSS Modules

https://github.com/css-modules/css-modules

CSS Modules

⇒ Scoped styles

⇒ High specificity

⇒ Support for media queries

⇒ Support for pseudo selectors

⇒ String class name with a randomized string at the end

⇒ Style tags inserted at head of document

If React, CSS Modules, and CSS-in-JS had a three-way...

Styled Components

Styled Components

⇒ Tightly couples styles to components

⇒ Styles can adjust based on props

⇒ High specificty

⇒ Declarative styling

⇒ Nested styling like Sass

⇒ Autoprefixes by default

⇒ Looks and feels like CSS

⇒ Injects a style tag in the head of the document

⇒ Styles are given randomized string names

styled-components is the way styling with CSS should be!

- Salty React Developer

Questions/Comments