Hafsah Emekoma
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:

Nesting web components in vanilla JavaScript

Nesting web components in vanilla JavaScript

Web components are underrated for the performance and ergonomic benefits they provide in vanilla JS. Learn how to nest them in this post.

Mark Conroy
Dec 5, 2023 ⋅ 10 min read
Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new defer feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 ⋅ 10 min read

Using ElectricSQL to build a local-first application

ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.

Rahul Padalkar
Dec 1, 2023 ⋅ 11 min read
Using Rust And Leptos To Build Beautiful Declarative User Interfaces

Using Rust and Leptos to build beautiful, declarative UIs

Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.

Eze Sunday
Nov 30, 2023 ⋅ 10 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