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:



$ cd

$ git checkout scratch $ 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 goldenrod by 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 App component.

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.className attached 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.className or 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.