A quick Guide to Styled Components with interactive Examples

“That’s interesting…” I thought when I first read about styled-components. And then I went right back to my tried-and-tested React components.

But then… when Max Stoiber, the co-creator of styled-components, showed us his new library at the React in Flip Flops coding bootcamp, “That’s interesting” turned into “That’s mind-blowing!”

I could hardly contain my excitement when I finally understood the concept behind styled-components. It opened so many new possibilities for how to style components. It simplified the way to structure web applications. And it enforced the consistency into the styling of React apps.

It all started with tagged template literals

You might think I’m a bit old school but I believe that if you want to truly understand any idea, you need to wrap your head around the underlying concepts. That’s why, instead of diving straight into styled components, let’s find out what sparked Max’s and Glen’scuriosity before they started the project and actually built styled-components.

ES6’s template literals simplify the way how you can mix variables and text. If you take two variables: name and mood, with assigned values of “Alice” and “happy” respectively, the template literal:

const sentence = `${name} is ${mood}.`;

will produce a sentence: “Alice is happy.”

Tagged template literals take the syntax a step further.

Tags are JavaScript functions but there are two essential differences in comparison to regular functions:

tag functions are called using backticks notation instead of parentheses. In the example below, we are calling the greetingTag function by wrapping the arguments in backticks:

greetingTag`${name} is ${mood}.`;

JavaScript treats the template literal — everything between backticks — as function arguments. In the first step, JavaScript transforms the template literal into an array of strings followed by extracted variables. If we take the example above, the transformed arguments passed to the greetingTag function will look as follows:

["", " is ", "."], name, mood

The first argument, an array, contains all strings that we placed before, between and after the name and the mood variables. In our example, the first string is empty because there is nothing before the name. The next two arguments, name and mood, were extracted from the template literal as variables.

Now, the greetingTag function can apply any logic to the texts’ array and the nameand mood variables and return the desired outcome.

Let’s create a tag function, the greetingTag, that will take three arguments: a textsarray, a name and a mood variables. And here is the logic it will use: if the value of moodis “happy”, it will return a regular greeting sentence. In all other cases, it will return the cheer-up version of the greeting:

const greetingTag = (texts, name, mood) => {
  if (mood === 'happy') {
    return `Hi ${name}!`;
  } else {
    return `Hi ${name}, you are awesome!`;
  }
}
const greeting = greetingTag`${name} is ${mood}.`;

Now, if we assigned “Alice” to the name and “happy” to the mood, the greetingTag function would return: “Hi Alice!”. If we changed the value of the mood to any other word than “happy” – say “excited” or “cat” —the greetingTag would return: “Hi Alice, you are awesome!”.

But how can you use this knowledge to style React components?

By Maciej Nowakowski

This article originally appeared in Codecamps

Top