React Styled Components & Benefits To Using Them

One way to instantly write better React code is to use React styled components, instead of the traditional method of regular jsx and css/sass. It might seem like a lot in the beginning and maybe something you don’t want to pick up because of how much it’s going to change your code, but it’s DEFINITELY worth it and you will love it after getting used to it. It’s not difficult to pick up at all because it’s basically what you’re already used to doing in React, which is creating components and placing them where they need to go. If you want to reference the documentation for React Styled Components as you go through this article, check it out here: Documentation. It’s very straightforward and easy to understand.

In this article I’m going to introduce you to styled components in React, show you how they work, and why you should use them in your code. You can install by running the following command in your terminal. After installing it, import it into your React project like any other npm module.

As I said at the beginning, ‘React Styled Components’ is an npm module that allows us to write jsx in a better way. Using the styled components module, we’re able to build pretty much all of our user interface components. I’ll start by showing an example of a styled component below:

Here right above is a styled component. As you can see we define it as a variable, style it, and then we just pass it down into our main React component. We’re able to write css code to style the component and it will render with those style attributes. So, for example, if we create the following component on the left with those styles, we’ll get the outcome on the right in the browser.

Now I’m sure you may be thinking that this is cool, but you haven’t really seen enough to impress you and make you want to switch over to using styled components. So of course, let’s dive deeper into them and go over some of the reasons why I think they are amazing.

Dynamic Styling

The first reason why styled components in React are great, is because of the ability to dynamically style components. This is HUGE for those components that are 90% the same, but just have one or two styling attributes that differ. For example, let’s say you create the same div from the example above and give it the same ‘NewDiv’.

After creating this component, you realize that the the component may have an instance where it needs to have a custom margin. You can then add a property to the styled component and then pass in that custom value for the margin whenever you need to. Whenever that property gets passed in with a value, it will become the value for the style that we applied the property to. In this example, ‘margin-left’. We’ll adjust the styling for the component like the example below:

In this example, we named the property ‘marginL’ and gave it a default of 0. So, any time you use this styled component, it will render with a margin-left: of 0. But, by simply passing down a value for ‘marginL’ into the component like done so to the second instance below on the left, the styled component in this particular instance will render with a ‘margin-left’ of ’20px’. So, the second instance of ‘NewDiv’ has a left margin while the first one does not, and it now looks like the right image below in the browser.

Pretty cool right? It gets even better than that when it comes to dynamic styling. We will have to install one more npm package for this one, but the two really go hand-in-hand and you’re definitely going to want to make use of both packages. Run the following command in your terminal and import it into your project like below.

Now, with the new package installed, let’s say you want to create a styled component ‘Text’ which will serve as the component for all of the text that you use in the project. Of course you’re going to want to style different instances of text differently, but also consistently across the project. So, for headings, let’s say you’re using a ’24px’ font-size with a bold weight. You can then define a property within the ‘Text’ styled component as ‘heading’ with the correct styling. Then, simply pass in ‘heading’ to the instance where you use the styled component and now that component will render with that styling. See the example below:

You may be using 3 different colors for your text in the project, so you can go ahead and define some properties with the names of those colors within the ‘Text’ styled component like done below on the left. Then, like shown in the right, just pass down the different color as a property to each of the components to get your intended result. I’m sure you’re starting to see now how, over time, using styled components can save you lots of time and really clean up your code.

Don’t worry about duplication

After fulling reading the first point, you may still not be convinced that you should switch to using styled components in your React code. At the end of the day, we’re still going to have to write a lot of css, so what’s the difference if I pass it to my components through properties or by class name?

Well, consider all of the times you’ve duplicated a class name by mistake, or all of the times you had to go out of your way and run a search through your css files to make sure you haven’t used the class name you currently want to define.

That doesn’t happen with styled components because of course, each property name is unique to its component. I can have the property name ‘blue’ for both the ‘Text’ component and the ‘NewDiv’ component, and they will not interfere with each other. Each one will inherit the styles that were defined in their own component. The use case here isn’t very practical because you’d likely give separate shades of blue their own name, but you get the point. If we define the properties like so, this is the result that will show up in the browser.

Easy Responsive Styling

Another thing that makes styled components so easy and efficient to use, is how they handle responsive styling. To add responsive styling to a styled component, you simply define the media query breakpoints inside the component along with the other styling. This keeps everything together and easy for you to manage and see.

You can also add breakpoints within properties that you create like the example below. Let’s say you have a lot of instances of styled components, but only some of them should have properties that adjust for a smaller screen size. You could simply add a media query with those style changes and then pass it down to the component as a property in the instances you need to. At any screen size below 700px, we’ll get the following examples:

Both have the adjusted width and height of 100px, but only the second ‘NewDiv’ component is green because that media query was defined within the ‘mobile’ prop which only gets passed down to the second instance.

I’m sure you’re picking up by now that the main benefit to using styled components is that they allow you to easily create re-usable components that can just as easily be customized. It really just sets you up to write very nice and clean jsx, which we’ll get into next.

Makes Code Look Cleaner

No more ‘div’, ‘p’, ‘button’, etc. Keep all the attributes, but leave the mess. Keep all the good, leave all the bad.

Everything is a component. Just from the small snippet of code below, things already look nicer and cleaner with React components.

Great For Design Systems

If you’re creating a design system, styled components are just amazing for you. They make it so easy to create and update reusable components that you’re going to use throughought your interface. They really speed up the workflow when building a project based on design mockups and/or a style guide since you can observe all of the styles you will need and easily create styled components that fit all of your needs Just like if you were using SASS to build a design system, you can categorize components into their own files and then import them as you need them. For this article I’m just writing my styled components inside the same file as the functional component I’m passing them into but of course in a real project you’d want to write the styles in their own separate files for semantics.

If you’re creating a small project then maybe styled components wouldn’t make a huge difference in the efficiency of your design, but the larger the project and the more components you need to have and style, the more helpful styled components are to the project. If it hasn’t sunk in why for you yet, it will as you start to use and get comfortable with styled components.

Conclusion

So if you haven’t figured this out yet, I like using styled components in React. In all seriousness, they’ve really helped me become a more efficient front-end developer and I really enjoy using them in my projects. They make things so clean and simple so my OCD is put at ease with them. If you have any questions or would like to learn more, please don’t hesitate to reach out. I hope you were able to learn from this article and I wish you the best. Happy coding and God bless!