💅 styled components 💅 — Production Patterns

image from http://www.thepaperwall.com/wallpaper.php?view=664b8b83bcedbb6b63ca17754909c1ce1eadab4c&fol=nature

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 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

Because styled-components allows us to pass a function as a style value, we can switch styles based on incoming prop values rather than appending new classes to our HTML like when using classic CSS.

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.

A portion of our original CSS

The same styles converted to a styled-components component.

Clearer JSX

If you’re like me and you find your JSX littered with <div> and <span>, you might be pleased to know that styled-components will guide you to a more semantic component hierarchy by default.

Original JSX with class hooks for styling

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 one of my favourite features of styled-components. Once you’ve created a styled component you can compose it into a new styled-component with ease.

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

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

Prop filtering

Since React 15.2.0, unknown properties on DOM elements have raised an unknown-prop warning. This means that if we do <div foo=”foo”> we’ll get a warning that “foo” isn’t a known property.

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.

We had a function to filter DOM props that we could use to ensure only valid DOM props were passed to things like <span>

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.