React. 7 tricks to work with Styled Components

Useful tips to improve the use of Styled Components

Gerardo Fernández
Jan 7 · 6 min read

Recently I have been working on a project that is implemented on Styled Components and I have found it interesting to gather in a small article all the tricks or tips that I have been “discovering” to work with them.

For those who don’t sound like them, the Styled Components allow us to translate the definition of the styles of our application to components instead of working on CSS style sheets. Therefore, they provide a new way of approaching the architecture of our application with which I have felt quite comfortable working so I encourage you to try it if you have not already done so. At the end of this article I will leave you a list of links that you can go to if you want to go deeper into this library beyond what I have here.

So, without entertaining ourselves, let’s see those tricks!

1. Use of the Context API

To do this, we must wrap with the ThemeProvider label all those components that we want to receive the variables of our theme in the same way that we would do with the other contexts that we define for our application.

For example, if our theme consists of the following variables defined in the theme.js file:

We can write the following:

So that any Styled Component that we use within the App component can access the variables defined within theme.js by accessing the theme property of the props variable:

2. Change a styled component type

Basically, what allows us is to modify the label that will render a Styled Component without adding extra code to our application.

Suppose we have the following styled component defined:

When we use it within our application, what we will see in the DOM will be a DIV tag since we are defining it as styled.div. However, it is possible to modify this label using the as attribute on our styled component, for example:

In this case, what we would get in the DOM would be the text wrapped inside a <p> tag.

3.Reference elements within the styled component

For example, if we want to define a DIV whose children are 50% wide, we can write the following:

This also helps us to use the pseudo selectors ::before and::after :

Therefore, beyond the fact that styled components suppose a new way of thinking in regards to the organization of our application, it will not be necessary for us to learn a special syntax to work with them, since our knowledge of CSS will help us.

4. Reference other styled components

We can achieve this as follows:

As you can see, within the styled component Icon we are referencing the Button component using the syntax ${Button}. This is possible because the styled components assign specific classes to each component created through the styled expression. so later we can use them to reference them.

Of course, this will only work if we reference a styled component not if we use it to reference any other type of component.

5. Extend styled components

We can subsequently do the following:

So what we get when we use <CustomA> will be a component with the styles color (coming from the DefaultA component) and font-size(coming from <CustomA> itself).

Of course we can also overwrite styles:

6. Define dynamic properties

For example, we can define a button that is painted differently depending on the value of the type property it receives:

Which is very useful to encapsulate the elements of our UI by modifying only certain aspects of them.

If you want to read more about tagged templates I leave a link to an article I wrote a few months ago:

7. Pass attributes

For example, if we have integrated Bootstrap into our application, we can define a button with the type property (as we did in the previous example) but this time paint the appropriate class based on the value of that property:

Final thoughts

In order to deepen them I recommend two quite interesting articles where some recommended ways to integrate them into our application are exposed:

Do you want to read more articles like this?

JavaScript in Plain English

Learn the web's most important programming language.

Gerardo Fernández

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

7 really good reasons not to use TypeScript

More from JavaScript in Plain English

More from JavaScript in Plain English

Why you should learn React instead of Vue

More from JavaScript in Plain English

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