A couple of months ago we started rebuilding our educational platform at Eedi. As we love experimenting with new technologies we decided to use styled-components to help us with styling our components. Betting on new, emerging libraries can be risky, but we decided to take that risk. And… it’s been awesome so far.

I’d like to show you how easy it is to use styled-components in your React project. As an example I took something that I was adding to our platform early this week, a spinner; of course we need spinners in our apps, who doesn’t?

I head over to our designers and ask them for one. Because we have great designers, instead of just getting the design I get ready HTML and CSS code, from one of them:

Here is the full code:

At first it seems like it’s going to be hard to implement. There are keyframes, animation, targeting .path… But because styled-components let you use the full power of CSS it’s easy.

OK, let’s try it out:

So I need a styled svg component, where I’m going to paste all of my CSS:

All I’ve changed in the above snippet was removing the .spinner in the CSS as this is what I’ll be targeting with my styled component anyway.

Once we have it we can use our StyledSpinner to create the Spinner we need, here is how:

So instead of using the <svg> from the original code, we will be using the StyledSpinner that we created using styled-components. As I mentioned before we don’t need .spinner class as that’s what we are styling with the StyledSpinner. All we need to remember about is the parameter’s names. In React, class becomes className, and any other hyphened parameters need to be camel case: stroke-width is now strokeWidth.

That’s all! Quick and easy.

Sneak peek to one of the examples on how we use it in our new platform: