Announcing styled-components v4: Better, Faster, Stronger 💅

A brand new global styles API, native support for the “as” and “ref” props, removal of .extend, full React v16 StrictMode-compliance, tons of speed, and more 💪

npm install styled-components@beta
  • Smaller and much faster, going from 16.1kB to less than 15kB (depending on your bundler and usage of the babel plugin) and speeding up mounting by ~25% and re-rendering by ~7.5% (potentially more if this PR is merged)
  • A brand new createGlobalStyle API, the hot-reloadable and themable replacement for the old injectGlobal
  • Support for the "as" prop, a more flexible alternative to .withComponent()
  • Removal of Comp.extend, with an automatic codemod to move your entire codebase to the unified styled(Comp) notation
  • Full StrictMode compliance for React v16, which also means we had to drop support for React v15 and lower (you may be able to use polyfills to get v15 working with styled-components v4)
  • Native support for ref on any styled component, no more innerRef thanks to React v16

Why is it a beta?

Performance, Performance, Performance!

styled-components v3 compared to v4 in three benchmarks: the first two are mounting component trees, the last is updating components with dynamic styles

New Global Styles API

import { createGlobalStyle } from "styled-components";const GlobalStyle = createGlobalStyle`
html {
color: red;
}
`;
export default function App() {
return (
<div>
<GlobalStyle />
This is my app!
</div>
);
}
import { createGlobalStyle, ThemeProvider } from "styled-components";// Global styles but theme- and update-able!
const GlobalStyle = createGlobalStyle`
html {
background: ${p => p.backgroundColor};
color: red;
font-family: ${p => p.theme.fontFamily};
}
`;
export default function App() {
return (
<ThemeProvider theme={{ fontFamily: "Helvetica Neue" }}>
<GlobalStyle backgroundColor="turquoise" />
</ThemeProvider>
);
}

Adios .extend, hello origami magic!

“Okay, but… what does that mean for me?”

The new “as” polymorphic prop

import styled from "styled-components"
import { Link } from "react-router-dom"
// <Component /> renders a div to the DOM
const Component = styled.div`
color: red;
`
<Component>Hello World!</Component>
// But we can also make it render any other HTML tag or component!
<Component as="span">Hello World!</Component>
<Component as={Link} to="home">Hello World!</Component>
import styled from "styled-components"const RedColor = styled.div`
color: red;
`
const BlueBackgroundRedColor = styled(RedColor)`
background: blue;
`
<BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor>
// Even though we switch to rendering a `span` from rendering
// <RedColor />, this will still have a red color on top of
// the blue background!! (.withComponent couldn't do that)

React v16 and refs

import styled from "styled-components"const Component = styled.div`
color: red;
`
// Later in your render function
<Component ref={element => { this.myRef = element; }}

TypeScript improvements

The types are now migrated to DefinitelyTyped!

Welcome Bhargav!

--

--

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