• 2 min

How To Add Props To Styled Components in React.js with TypeScript

How To Add Props To Styled Components in React.js with TypeScript
Table of Content

Using React.js with TypeScript is not as straightforward for everyone when building a React application. I have quite some experience with TypeScript that I didn’t have significant issues (anymore 😅).

I’m pleased with Styled-components. Adding proper TypeScript typings was a big question for me, until now! So I want to share them with you. 😉

If you haven’t TypeScript experience yet, please check my TypeScript beginner post. 👇

TypeScript for Beginners

TypeScript Interface and Enum

export enum sendState {    sending = 'sending',    recieved = 'recieved',    error = 'error',}export interface iSendingState {    state: sendState}

Let’s clarify what I do here.

I want to add a prop state to my component, but the value's that I want to accept in it are: sending, received, and error. That's what I do in my enum.

I define the property state in my interface, and I tell that I accept only the values of the sendState enum. So if I put in another value, my IDE and build system starts complaining.

TypeScript helps me write predictable code, as you can see.

Styled Component with typing

import { iSendingState, sendState } from './sending-state.type'export const StatusMessage = styled.div<iSendingState>`    display: inline-block;    color: #fff;    ${(props) => {        if (props.state === sendState.sending) {            return 'background-color: orange;'        }        if (props.state === sendState.recieved) {            return 'background-color: green;'        }        if (props.state === sendState.error) {            return 'background-color: red;'        }    }};`

You usually define a styled-component like: export const StatusMessage = styled.div this. But now I add the iSendingState, which tells that my component accepts a state property.

Hopefully, this helps you further building an excellent application with predictable code 💪


After reading this post, I hope you learned something new or are inspired to create something new! 🤗

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM’s are always open 😁


I’m Ray, a Frontend Developer since 2009 living in the Netherlands. I write about Frontend Development, JavaScript, TypeScript, Angular, CSS, VueJS and a lot more related topics.

Want to reach me for comments or questions on my blog? Send a DM on Twitter @DevByRayRay