Styled-Components is a new CSS tool, created by Max Stoiber and Glen Maddern, which helps you organize CSS in your React project. It also works well with React Native. In this article, I will walk you through the main concepts of Styled-Components along with coding examples.
Three main goals of Styled-Components
First of all, let’s talk about the purpose of Styles-Components and the benefits you will gain from using it.
- Getting rid of the mapping between styles and components — Most of the time, a dumb component always has its own small
style.cssfile related. So, you need to create two files every time you want to create the dumb component. This seems to be fine at the beginning, however, when your project is getting bigger, you will end-up with a whole bunch of files. Styled-Components allows you to write CSS directly inside your component, which perfectly solved this problem. - Building small and reusable components — Small components can easily be reused and tested. By using Styled-Components, you can easily build a small component and extend its capability with
props. - Reducing the risk of specificity clash — Everyone might have encounter the specificity clash problem before. For example, you just wanted to add a margin to a specific paragraph, but it unintentionally impacts the other paragraphs. You can easily solve this problem by applying a CSS class only once. Styled-Components is actually doing this for us. It automatically generates a unique class name and pass it to our component.
Let’s get our hands dirty
It is time to see how it works in action! You are going to create a very simple Gallery application, let’s call it Mystagram.
Mystagram — styled-components tutorial
If you would like to follow along with this tutorial, which is really recommended, please clone the styled-components-tutorials project by doing:
$ git clone https://github.com/lvarayut/styled-components-tutorial$ cd styled-components-tutorial$ git checkout scratch
Install all dependencies & Start developing
$ yarn install$ yarn start
Reusable Title component
Let’s start with our simple Mystagram title using h1 tag.
You just created the Title component with the goldenrod color. You can easily reuse this component when needed. Notice how we wrote the fully CSS wrapped in the back ticks inside our JavaScript file. This is a new feature in ES6, a.k.a ES2015, called a Template literal notation.
As you learnt from the previous section, Styled-Components automatically generate a unique class name and pass it to our component. Here is the final result
<h1 class="4fKfRK">Mystagram</h1>Â , you could open your inspect element and take a look yourself!
Now, you have the Title component, however, it is not very reusable because the color is hard coded. What if the component could receive a property and set the color dynamically. It absolutely can!
You just modified the Title component to accept the color property. We then can pass a lovely color to the component, otherwise the color will be set to goldenrodby default.
Third party components
So far, you have seen how to style a primitive element, h1. You might be asking what if we already have a component, might be from a third party library or from your own, and want to style it. Here we are going to style our Appcomponent.
styled accepts a component as an argument. You just styled the App component with width, height, and text-align properties. We also put more styles to the Title component to make it prettier.
Note that when you style a component, you need to make sure that your component has
this.props.classNameattached to its DOM. Because after Style-Components generated a unique class name, it will pass the class name to your component. If you are not sure whether a third party component hasthis.props.classNameor not, you can simply wrap it up in your own<div className={this.props.className}>tag.
Global style
We sometimes need to set a global style to the entire application, such as font-family, background-color, and etc. Style-Components provides an injectGlobal function to help us style globally.
Gallery and Thumbnail components
Let’s get more familiar with Styled-Components by creating the Gallery and the Thumbnail components.
You just created one Gallery that wrapped five Thumbnail components.
Optional Thumbnail border
Again, we might not need to show the Thumbnail border all the time. We need an ability to say which Thumbnail should have border. Let’s create a property called showBorder .
For the sake of simplicity, we showed the border for the Thumbnail whose index is an even number.
Reuse styles with “css”
Imagine, if you need to reuse the border style somewhere else, it is a good idea to separate the style to its own file or variable. You can do exactly this by using css function.
If you declared the
bordervariable with a normal string without usingcss , the props will not work because Styled-Components will include your style by usingtoString()function without any string interpolation features
Wrapping up
We just built a simple application which gave us the overview of the Style-Components. You now understood what the main proposes of Style-Components are, and how to use it in your own application. There are still some functions that have not been covered in this article, for example, keyframes and ThemeProvider, but after you got the main concepts, they are pretty easy to be understood. I encourage you to check them out ;-)
- styled-components repository — has very good documentation of all functions and also use cases.
- The magic behind styled-components — explains how
styled-componentsuses Template literal notation behind the scene.