2021-06-10
3722
#typescript
Hafsah Emekoma
53950
Jun 10, 2021 â‹… 13 min read

Using styled-components in TypeScript: A tutorial with examples

Hafsah Emekoma Writer, frontend developer, and overall tech enthusiast.

Recent posts:

7 Common CSS Navigation Menu Mistakes And How To Fix Them

7 common CSS navigation menu mistakes and how to fix them

Navigation menu errors are common, even for seasoned developers. Learn seven common navigation menu errors and how to solve them using CSS.

Temitope Oyedele
Jun 13, 2025 â‹… 6 min read
Comparing the top 5 React toast libraries

Comparing the top React toast libraries [2025 update]

Compare the top React toast libraries for when it’s more trouble than it’s worth to create your own custom toast components.

Nefe Emadamerho-Atori
Jun 13, 2025 â‹… 16 min read
Comparison between TanStack Start and Next.js — two modern full-stack React frameworks with different architectural approaches.

TanStack Start vs. Next.js: Choosing the right full-stack React framework

TanStack Start vs. Next.js: both are powerful full-stack React frameworks, but they take fundamentally different approaches to architecture, routing, and developer experience. This guide breaks down their core features from SSR and data fetching to TypeScript support and deployment, to help you choose the right tool for your next React project.

Abiola Farounbi
Jun 12, 2025 â‹… 8 min read
Angular v20 might seem boring…here are 5 reasons it’s not

Angular v20 might seem boring — Here are 6 reasons it’s not

While it may seem like a maintenance update, Angular v20 is packed with practical, production-ready upgrades that will enable us to build apps faster and with more confidence.

Yan Sun
Jun 12, 2025 â‹… 8 min read
View all posts

5 Replies to "Using styled-components in TypeScript: A tutorial with examples"

  1. This is a great tutorial, can you please make this tutorial better by specifying file to copy these codes? Thank you.

  2. Hi there! Great tutorial! This is my first crack at typescript and this made it very easy to understand. I’m in the middle of this and I just have some comments as I’m going through. The jumping back and forth and naming of folders made it a bit difficult to follow. For example the create react app doesn’t specify that’s where you should also put the name of your folder. If you’re expericenced with react you can figure it out but I did create react app and was wondering where the amazon clone folder came from because I should have read ahead and figured out that should have been when I created the react app in the first place.

    And then there was a part saying that there are three parts to what we are creating, the nav bar, the body, and the menubar. While we were inside of the components folder this tutorial tells us to go to the index folder in which I think it meant the App.tsx file. But I was re-reading trying to find if I missed where this index folder should have gone. Was I supposed to make an index file inside of the components folder? Where the three folders I made correct? Looking at the code I figured it was talking about the App.tsx file.

    The next step after that specifies to go to our style file but at that point we have two style files. It’s a container that, I’m guessing we are in the global folder? It’s hard to tell where the container goes. The example doesn’t show the global code that we entered but if we are using the container style in app.tsx and in the navbar index.tsx then maybe it should be in the global? I don’t know just following this tutorial is a bit confusing and I think there should be some breadcrumbs as far as describing what is going where.

    But besides the confusion I’m really enjoying this tutorial and I love styled components. I think one of the most valueable things I took away from this tutorial is that vs styled components extension! OMG I’ve just been writting my styles with styled components by hand. I also love seeing the file organization.

Leave a Reply