Announcing native support for the css prop in styled-components ๐ŸŽ‰

A new, convenient way to quickly style and iterate on your components and their boundaries has landed in styled-components ๐Ÿ’…

3 min readNov 26, 2018


As Ryan Florence once said, the essence of working with components is worrying about the right lines to draw in your app and then filling in the shapes they create with components.

Invented by Sunil Pai in glamor, the css prop has taken over the CSS-in-JS world as a convenient way to build components while staying flexible with the โ€œlinesโ€, their boundaries.

const MyButton = () => (
color: papayawhip;
background: palevioletred;
Click me!

By declaring the CSS inline, itโ€™s simple to move elements around your app and iterate on them, allowing you to keep moving fast in the early stages. Then, once you feel comfortable with the boundaries youโ€™ve chosen, you can quickly turn them into styled components and lock them into place.

So far, to get support for the cssprop in styled-components, you had to use user-land libraries such as rebass. They worked great, but required a lot of manual work and the implementation wasnโ€™t the most performant.

Today, weโ€™re excited to announce native support for the css prop in styled-components! ๐ŸŽ‰

Enabling support for the css prop

All you have to do to enable support for the css prop is to upgrade to the latest version of the styled-components Babel plugin:

npm install --save-dev babel-plugin-styled-components@latest

If you arenโ€™t using the Babel plugin yet, you also have to add it to your .babelrc.

Thatโ€™s all there is to it, now youโ€™re ready to css and roll! ๐Ÿ’ƒ๐Ÿผ

Using the css prop

Using the css prop is as simple as adding it to any element in your app. It supports everything a normal styled component supports ๐Ÿ’ช, including custom components, adapting based on props and theming:

<h1 css="color: palevioletred;">
The css prop
color: ${props => props.theme.colors.text};
background: ${props => props.theme.colors.primary};
border-radius: ${props => props.primary ? '4px' : '5px'};
Click me

Under the hood, the Babel plugin turns any element that has a css prop into a styled component. For example, if you were to write this BlueButton component:

const BlueButton = (props) =>
<button css="color: blue; padding: 1em;" {...props} />
<BlueButton css="background: blue; color: white;">Hey!</BlueButton>

The Babel plugin would turn it into this:

import styled from 'styled-components';const StyledButton = styled('button')`
color: blue;
padding: 1em;
const BlueButton = (props) => <StyledButton {...props} />;const StyledBlueButton = styled(BlueButton)`
background: blue;
color: white;

Yep, it even adds the styled-components import automatically so you donโ€™t have to think about it. This mechanism also means that support for the css prop adds exactly 0.0kB to the runtime of the library. ๐Ÿ˜Ž

Huge shoutout to Satyajit Sahoo, who came up with this ingenious technique!

We hope you enjoy the css prop. ๐Ÿ’œ If you want to learn more check out the documentation, and let us know what you think in the community!

As always, stay stylish out there. ๐Ÿ’…



Technical cofounder of, creator of react-boilerplate, co-creator of ๐Ÿ’… styled-components and maintainer of KeystoneJS and micro-analytics.