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.
First of all, let’s talk about the purpose of Styles-Components and the benefits you will gain from using it.
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.
It is time to see how it works in action! You are going to create a very simple Gallery application, let’s call it
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
Let’s start with our simple
Mystagram title using
You just created the
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
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
styled accepts a component as an argument. You just styled the App component with
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 has
this.props.classNameor not, you can simply wrap it up in your own
We sometimes need to set a global style to the entire application, such as
background-color, and etc. Style-Components provides an
injectGlobal function to help us style globally.
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.
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
For the sake of simplicity, we showed the border for the Thumbnail whose index is an even number.
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
If you declared the
bordervariable with a normal string without using
css, the props will not work because Styled-Components will include your style by using
toString()function without any string interpolation features
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,
ThemeProvider, but after you got the main concepts, they are pretty easy to be understood. I encourage you to check them out ;-)
styled-componentsuses Template literal notation behind the scene.