Image for post
Image for post

Releasing styled-components v4 final 🎊

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

Evan Jacobs
Oct 15, 2018 · 2 min read

If you didn’t read the styled-components v4 announcement, here’s a quick primer on what’s in this release:

  • , replacing the old injectGlobal
  • , a dynamic alternative to .withComponent
  • in favor of unifying styled(Comp)

Read the announcement post for the full details on these.

That’s a lot already, but we haven’t been sleeping since the initial announcement!

  • so you can get all the goodies of the Babel plugin in create-react-app! 🎣
  • to auto-magically migrate most of your codebase from to v4 🎩✨
  • so that unit testing your components is easier
  • 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 (most notably, nicer class names) without needing to eject 🎉

All you have to do is change your import statements to "styled-components/macro" and that’s it:

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 :

  1. by running npm install styled-components@latest babel-plugin-styled-components@latest
  2. with npm install -g styled-components-codemods
  3. 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!

If you’re using TypeScript, you’ll also need to upgrade your typings to the new ones from DefinitelyTyped: npm install @types/styled-components@latest

Note: see the website for more detailed instructions and potential edge cases, and make sure that you’re on React v16.3+, which is required for styled-components v4 due to the new ref system.

From all of us, we hope you love v4 as much as we loved working on it! Let us know what you think in the community:

As always, stay stylish. ✌️💅

Like styled-components? Please consider making a donation or convincing your company to sponsor our OpenCollective! We’re a typical open source volunteer team and your contribution helps us do things like compensate collaborators, go to conferences, and make cool swag.

💅 styled-components

Visual primitives for the component age.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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