Understanding styled-components: A basic guide on styled-components usage with React/Next/Vue

What is styled-components?

Styled-components is a styling library/package that lets you write CSS in Javascript while simultaneously creating and building custom components whose styles can be dynamic.

These built components can be dynamic and reusable, by providing relative properties to the "styled component". Also, one of the styled components' advantages, is the naming complex identifiable to basic JSX reusable components and organized structure relative to fragments and component folders.

What to know forehand?
To understand styled-components easily you need to have basic or quite advanced knowledge of the following:

1. Javascript or Typescript
2. One of React, Next, Vue or any other related Javascript Library.
3. CSS
4. HTML semantics

Installation

styled-components like other libraries/packages are mainly added to projects by installation and can be found in the NPM and Yarn registry.

Basic installation with NPM

npm install styled-components

or with yarn,

yarn add styled-components

After successful package installation and our package can be found in the package.json file, styled-components is now ready for usage.

Writing your first styled component

The first step to writing styled-components is creating a file with a .js or .ts extension and importing it as a module on that file.

import styled from "styled-components"

After importing, we write a basic styled-components' syntax;

import styled from "styled-components"

const Text = styled.p`
    color: blue;
    font-size: 16px;
    padding: 4px;
`;

As seen above, we declared a variable Text whose value contains our helper methods which are HTML tags and can be h1, button, div and any other you can think of and in our case right now, it is the p method and these methods are called using an obscure JavaScript feature known as “tagged template literals” or "backticks".

Having written our first styled component, we want to learn how to add the component and make it part of the JSX.

How it works

Adding the already-created styled component into the JSX works by just adding it as a component in the JSX with the variable name as the tag name.

import styled from "styled-components"

const Text = styled.p`
    color: blue;
    font-size: 16px;
    padding: 4px;
`;

const TextComponent = () => {
  return(
      <div>
        <Text>Hello Devs</Text>
      </div>
  )
};

The styled component declaration was made in the same file as the base component so along with time, when the file gets bulky, there is a need to separate the style from the actual JSX file which earlier on we talked about having the style in a .js or .ts file.

So, we create a .js or .ts file, import styled-components and add the style declaration but there is one more thing; exporting the style variable as a named export.

style.js

import styled from "styled-components"

export const Text = styled.p`
    color: blue;
    font-size: 16px;
    padding: 4px;
`;

After exporting the style variable as a named export, we can then import it into our JSX file based on the directory of the style file

import { Text } from "./style" 

const TextComponent = () => {
  return(
      <div>
        <Text>Hello Devs</Text>
      </div>
  )
};

Adding Props

As said earlier, one of the advantages of styled-components is the ability to build custom components whose styles can be dynamic and reusable.

In the quest to make components' styles dynamic, it is effective to use props and from basic knowledge of props, they are values dynamic to a component that originates from a base declaration comprising similar identities. Prop values affect only the component that provides the value.

Based on the fact styled-components is CSS in Javascript, we can write javascript conditions to provide styles based on prop values.

How it works

import styled from "styled-components"

export const Text = styled.p`
    color: ${p => p.color || blue};
    font-size: 16px;
    padding: 4px;
`;


const TextComponent = () => {
  return(
      <div>
        <Text color="red">Hello Devs</Text>
        <Text color="green">Hello Devs</Text>
        <Text>Hello Devs</Text>
      </div>
  )
};

As seen above, the color props were passed and the Text components that have the dynamic values would possess their color style while components that are not passing values would possess the default blue color.

Passing props in Typescript

Passing props in typescript basically has an addition which is defining types for the values.
Let's have an example and use interface

import styled from "styled-components"

interface Props {
  color?: string;
  fontSize?: string;
  hasBiggerSpace?: boolean;
} 

export const Text = styled.p<Props>`
    color: ${p => p.color || blue};
    font-size: ${p => p.fontSize || 16px};
    padding: ${p => p.hasBiggerSpace ? '10px' : '4px'};
`;

const TextComponent = () => {
  return(
      <div>
        <Text color="red" fontSize="20px" hasBiggerSpace={true}>Hello Devs</Text>
      </div>
  )
};

NOTE: It is not a must to pass a default value when doing conditions for props. CSS attributes inside the method can receive values without fallback.

color: ${p => p.color};

CONCLUSION:

Styled-components is a great styling library for use for its many advantages most especially dynamism. In most cases, I would recommend it.