Releasing styled-components v4 final 🎊

After a couple weeks of beta testing styled-components v4 is now officially ready for primetime!

  • A refreshed createGlobalStyle API, replacing the old injectGlobal
  • Support for the "as" prop, a dynamic alternative to .withComponent
  • Removal of Comp.extend in favor of unifying styled(Comp)
  • Full StrictMode compliance for React v16
  • Native support for ref on any styled component
  • Fully automatic codemods to auto-magically migrate most of your codebase from to v4 🎩✨
  • A test util for Enzyme so that unit testing your components is easier
  • All the bugfixes since the initial beta release (shoutout to all the early testers for their invaluable feedback)

Announcing the styled-components Babel Macro 🎣

Thanks to our contributor Luc Leray we’ve now got a Babel Macro! This means create-react-app users can get all the benefits of the styled-components Babel plugin (most notably, nicer class names) without needing to eject 🎉

import styled from "styled-components";👇👇👇👇👇import styled from "styled-components/macro";

5 Minute Migration 🎩✨

We’ve worked hard on making this upgrade as easy as possible, so for most of you there’s only three steps to upgrade your entire codebase to v4:

  1. Install the codemods globally with npm install -g styled-components-codemods
  2. Run the codemods on your codebase with styled-components-codemods v4 src/**/*.js. They will auto-magically move all your Comp.extend usages to styled(Comp) and your injectGlobal usages to createGlobalStyle!



Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store