What is styled-components ?

Automatic critical CSS

Styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary. No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.

Easier deletion of CSS

It can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.

Simple dynamic styling

Adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes. Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.

Automatic vendor prefixing

Write your CSS to the current standard and let styled-components handle the rest.

Free