Releasing styled-components v4 finalย ๐ŸŽŠ

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

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

  • Smaller and much, much faster
  • 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

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! Hereโ€™s what new in the final release:

  • A brand-new Babel macro so you can get all the goodies of the Babel plugin in create-react-app! ๐ŸŽฃ
  • 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 ๐ŸŽ‰

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 thereโ€™s only three steps to upgrade your entire codebase to v4:

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

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.