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 ๐Ÿ’…

Max Stoiber
Nov 26, 2018 ยท 3 min read

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.

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:

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:

<Button
primary
css={css`
color: ${props => props.theme.colors.text};
background: ${props => props.theme.colors.primary};
border-radius: ${props => props.primary ? '4px' : '5px'};
`}
>
Click me
</Button>

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:

<BlueButton css="background: blue; color: white;">Hey!</BlueButton>

The Babel plugin would turn it into this:

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

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. ๐Ÿ’…

๐Ÿ’… styled-components

Visual primitives for the component age.

Max Stoiber

Written by

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

๐Ÿ’… styled-components

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

Max Stoiber

Written by

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

๐Ÿ’… styled-components

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

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