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.

const MyButton = () => (
<button
css={`
color: papayawhip;
background: palevioletred;
`}
>
Click me!
</button>
)

By declaring the CSS inline, , 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.

Enabling support for the css prop

All you have to doto enable support for the css prop is to :

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. πŸ’ͺ, including custom components, adapting based on props and theming:

<h1 css="color: palevioletred;">
The css prop
</h1>
<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:

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;
`
<StyledBlueButton>Hey!</StyledBlueButton>

Yep, 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 and


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

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

More From Medium

More from πŸ’… styled-components

More on CSS from πŸ’… styled-components

More on CSS from πŸ’… styled-components

Why styled-components? πŸ’…

Related reads

WarsawJS
Jul 20, 2018 Β· 16 min read

1.1K

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