Using styled-components and Props With Typescript React
By: Ndukwe Armstrong
Tags: Javascript Development, CSS, Frontend Development, Typescript, Styled Components

Styling and building a sleek user interface or UI is a fundamental process in front-end development. One of the fast, high-performance and easy-to-use styling libraries is the styled-components.

Typescript is an awesome programming language built on javascript, although much code might be written for a similar task in javascript the advantages worths it.

Type Checking

Typescript is a strictly typed language and just like Java, C++, C#, etc she ensures you set a type for every variable, function, and function argument.

let num: number = 12;

const myFunc = (name: string):string => name + 'john';

This is a basic rule of Typescript and you can read more about it from her docs

Create React App

We will begin firstly by creating a typescript-enabled react app, if you already have one you can skip this step.

Open your terminal and run the below command

npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript

This will create a basic template like the one below

typescript react

Next, You install styled-components and the type definitions by running the below commands at your root directory

npm i styled-components @types/styled-components #or yarn add styled-components @types/styled-components

Developing A Button Element

Open your App.tsx or App.ts file and import the styled-components package

import styled from 'styled-components'

Above the App function, create a styled button element and render it inside a HTML section tag

const BUTTON = styled.button`

border: 1px dotted yellow;

background: white;

color: black;

font-weight: 500; ` const App(){

return (

<section>

<BUTTON> First Btn </BUTTON>

<BUTTON> Second Btn </BUTTON> </section> ) }

Passing Props To Component

Properties or props for short, are used to make UI components more dynamic, consider you need two buttons with a different border-color but other CSS properties are the same, you can pass props to each button, with some set of conditions that if that props value is available it should change the CSS property.

let’s do this!

... <BUTTON submit={true}> first Btn </BUTTON>

<BUTTON pay="shopping"> Second Btn </BUTTON> ...

From the code snippet above I gave the first button a prop of submit and the data type is a boolean, for the second button I gave it a prop of pay and the data type is a string.

Now, I define an interface at the top of the styled button with both properties

...

interface IBtn { submit: boolean,

pay: string } const BUTTON = styled.button`

border: 1px dotted yellow;

background: white;

color: black;

font-weight: 500;

`

...

Now, you simply pass this interface to the styled button, this helps typescript to check the types of pros to be received for the component

...

const BUTTON = styled.button<IBtn>`

...

simple! right?

And then we can define the CSS properties based on the props the component receive without typescript throwing any error

...

const BUTTON = styled.button<IBtn>`

border: 1px ${props => props.submit ? 'solid' : 'dotted'} yellow;

background: white;

color: black;

font-weight: ${props => props.pay === "shopping" ? 'bold' : 500};

`

...

congratulations!

You made this far in safely passing props to styled components without typescript yelling at you. I know you might be wondering why I use an interface instead of a type, well you can read more about that from this article.

Thanks for reading this article, you can follow me on Twitter, Github, and Linkedin, have a lovely day.