The Ever So Stylish “Styled-Components” — Part 1: The Basics

sunglasses giph — PrimoGiph

Like me, you too are new to the world of styled-components. Well, my fellow curious Front end developer look no further!! This blog series will be all about styled-components from the basics of what are styled-components, how to get started & styling your components, leading up to how you can properly pass props in styled-components!

What are styled-components?

In all honesty, I thought CSS inline styling, style-sheets and SASS were the only forms of styling a developer could use. That assumption was gracefully proven wrong once I learned about styled-components.

A styled-component is a library for React & React Native that allows you to work with every JavaScript front end library. This is called “CSS in JavaScript”

Some of the great things about styled components that I favorite a lot are:

  • Introduced in ES6 (modern JavaScript). The library utilizes template literals to style your components → the infamous back-ticks that we all, if not most, are familiar with ex: ${}`
  • Removes the hassle of mapping between components and style-sheets.
  • Diminishes class name bugs, for styles, there is no worry on duplication, misspelling or overlapping selector names caused by CSS only having one scope — global.

How To Get Started

Since styled-components are a React library, like all the libraries you will come across there are a few steps in how to start using them.

First, assuming you have already created your react (or react native) application by now, you will need to do an install to have the package in your package.json.

npm install --save styled-components

Awesome, now that you have it installed, let’s get to using these styled-components!

Let’s Do This Gif

Styling Your Components

The first thing you want to remember is that we must always import our styled-component within every component we want to use them in.

import styled from "styled-components";

Now comes the fun part. The way that styled-components work is exactly the same way you would create a functional component, with the exception that this component will take in the HTML tag you will use it as, along with template literals right after.

Example:

photo example of style-component Paragraph compontent
Example of styled-component rendered

As you can see, with the use of styled-components, a developer has the ability to create styling for any and all html tags without the use of inline styling or style-sheets! Simply, how you would create a functional component, add your desired CSS styling. Lastly, remember to render it like you would a component in React:

render(
<Title>Add something here as a title</Title>
)

Isn’t that amazing!?

amazing gif

Passing Props In Styled-Components

Just when you thought it couldn’t get anymore fun than this. Styled-components have the ability to pass props, By doing so, you have now expanded your abilities to crafting your components to be reusable.

But wait!… Whats the point of having reusable components??

Well, I am glad you asked! Reusable components are very useful to your React Application for the main reason why reusable bags are valuable to have instead of plastic bags!

We should value reusable components because:

  • Efficient — Reuse-ability within your application makes it easy to keep code DRY(Don’t Repeat Yourself). Prevents duplication across all developers working on the application. Along with work productivity increasing in speed because of how accessible the components are just by importing.
  • Code That’s Proven To Work — This is valuable in regards to not having to go through the hassle of creating code and testing it out. As the developer, you understand the code and know it works. You are likely to also pinpoint where an error is rendered as well.
  • Easy For Debugging — You have already proven that the code works, now you are able to import that working component into other aspects of your code. Which means that, debugging code will more manageable because you already have a good ideas where the error in the component is coming from.
  • Adaptable & Adjustable— By this I mean, as a developer just learning how to incorporate styled-components. There is only a slight learning curve to working with this kind of styling, however that is not an issue, you as a front end developer are familiar with creating functional components already! The benefit here is that you adjust & adapt to writing CSS in functional components.
In motion recycle gif

Now that we got that out of the way.. Let’s get into passing props in styled-components and how they can make your component reusable with them.

Passing props is a very React / React Native thing to do. So it only makes sense that we can pass props in function-like components. Such as a styled-component. A reason we would want to pass props within our styled-component is because we want that styling to be interchangeable regarding many aspects. i.e. We want the user to have the ability to change the color of their h1/p/div tag etc , or if we have different “variants” for a button component, we want those assigned variants to render a specific color to the user.

Example of a styled-component with props

In the screenshot above, we can see that the Wrapper styled component has a few CSS styles that are passing in props. In this case, the developer is creating a reusable component to make their wrapper change in size. As an example, if you look at line 28, here we have a style of flex-direction that has a direction state that changes its direction from row to column. When setting the direction prop to true, we are swapping out its direction.

Here are the visual examples of the direction prop being used to flex between row and column:

<Card direction='row'> OR <Card direction='column'>// some code here</Card
example of direction prop using row
example of direction prop using column

Software Engineer