💅 styled components 💅 — Production Patterns

Jamie Dixon
Nov 2, 2016 · 3 min read

styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS.

If you’re not already familiar with styled-components head on over to their website and take a look.

Here’s what a basic styled-component component looks like:

Image for post
Image for post
image taken from https://styled-components.com/

We’ve been using styled-components on a couple of projects over the last few of weeks and I wanted to write down a few of the benefits/patterns that we’ve found emerging from our use.

Compressed Styles

The result of this has been a reduction in lines-of-code. When we initially took our CSS and converted it with styled-components, we saw a dramatic improvement.

Image for post
Image for post
A portion of our original CSS
Image for post
Image for post
The same styles converted to a styled-components component.

Clearer JSX

Image for post
Image for post
Original JSX with class hooks for styling
Image for post
Image for post
After converting to styled-components No more className! and look at those semantic tags.

I’m sure your JSX already looks like the second example :P but if it doesn’t, styled-components could help you get there by leading you down a default path to success.

Composing Styles

This is because styled-components allows you to pass any component to it, not just DOM elements.

Image for post
Image for post
Here we compose Message into two new components, Success and Danger.

Prop filtering

Sometimes we have components that need to accept all possible DOM properties and pass them down to the inner DOM element. It would be difficult to do this by specifying every DOM property manually so we end up spreading props in these kinds of components: <div {…props}>.

In order to avoid the aforementioned unknown-prop warning we started filtering out props that weren’t valid DOM props ourselves. Interestingly styled-components already does this internally and by offloading this problem onto a well-maintained library, we avoid having to update our own whitelist of valid DOM properties.

Image for post
Image for post
We had a function to filter DOM props that we could use to ensure only valid DOM props were passed to things like <span>
Image for post
Image for post
Using styled-components we get this whitelist for free, even if we don’t need any styles!

These are just a few of the patterns/benefits we’ve experienced since we started using styled-components. I’m sure there will be more as our use continues and time goes on.

A huge thanks to Max Stoiber and Glen Maddern for creating styled-components.

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