Skip to content
UdemyReactPaid courseAll LevelsCertificate

React styled components / styled-components [V5 EDITION] (Udemy.com)

Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library

Created by: Tom Phillips

Last updated July 2026

icon
What you will learn

  • Increase your value as a React developer.
  • Convert or create new React apps using the the CSS-in-JS styled-components library.
  • Style React apps using a newer, cleaner, and more efficient method with Styled Components.
  • Use Animations with styled components
  • Create component variations using props (e.g. large / small / primary / secondary Button)
  • Create different themes with a theme toggle component to apply a light & dark theme
  • Implement third party fonts using Google fonts
  • Learn how styled components can interact with ordinary React components & React hooks
  • Create a mobile-first responsive layout

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 90 / 100

icon
Course Description

**Updated course to version 5 of React styled-components.**

This styled-components course is the next step for React developers who want to increase their value as a front-end developer by ditching flaky CSS class names and structures, messy CSS imports and CSS class naming conflicts with their React apps and instead want to embrace the best way of styling React apps, with the CSS-in-JS Styled Components library

The styled-components framework lets you write actual CSS in your JavaScript. This means you can use all the features of CSS you use and love with styled components, including (but by far not limited to) media queries, all pseudo-selectors, nesting, etc.

In this styled components course we'll be creating a very basic 2 page mobile-first app using create-react-app. We'll be using styled components to style our entire app, including applying global styles, implementing third party fonts using Google fonts, creating a common mobile-first and responsive Layout, creating variations for components via props (for example a large or small Button), implementing a theme toggle component and switching our app between 'light' and 'dark' mode, as well as implementing animations with styled components.

React took the traditional view / viewmodel approach to web development and combined them both into one, while still keeping code modular and single responsibility. Styled Components can be seen as an extension of that, bringing the styling into the JS file as well. They all have one to one relationships, so it makes sense to combine them as long as they're kept modular. This React styled components course will help you understand the power of this approach and show you how to build such components.


What other students are saying about this React Styled Components course:

5/5 stars - "Nice course, It improved my understanding of Styled-components." - Osborne Tunde


5/5 stars - "I loved the course that was extremely useful for me and helped me finally understand how styled-components works. Without any doubt, I recommend this course and I will go back to the future courses of Tom who is an excellent instructor. Thank you!" - Alex Pavlov


5/5 stars - "I love this course so much, Tom is very responsive with the student question. No copy paste code, that we know all students doesn't like it. There's so many new information and a modern way to write a components, I like it so much and I will implement it to my projects :) Thank you Tom for helping us !" - Kadek Pradnyana


5/5 stars - "A great introduction to styled components in React. It goes through each of the most common scenarios to help you start building. Excellent course!" - Memo Ramirez


5/5 stars - "A great intro to the styled-components way of styling React components." - Ian Taite


5/5 stars - "I did not know that this is possible. Amazing" (translated) - Alex

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Tom Phillips

Tom has been a web developer for over a decade. He created WebDevEducation to provide courses that provide you with the skills you need to increase your value and thrive as a web developer. Tom's courses are fast-paced, information-dense, project-based courses that waste no time with useless fluff. Why waste 30+ hours on a course that you probably won't finish, when you can learn exactly the same thing in a quarter of the time, have a fully functioning HOSTED project at the end of it AND with the github code to prove you're capable in that technology? Learn popular web development libraries and frameworks with Tom to get ahead of the competition!

(TOMPHILL LTD - 09531652)

icon
More courses by Tom Phillips

$59.99

$19.99

$54.99

$69.99

$64.99

$74.99

icon
More React courses

$139.99

$94.99

$74.99

$69.99

$99.99

$129.99

icon
Reviews

4.5

1,208 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Anonymized User on 1/7/2026

This is a short course but the contents are comprehensive and compact. The trainer is very clear and knowledgeable in explaining each modules in a very detailed way. One thing I like most is the way the trainer codes where code indentation is observed, that really ease the reading of codes on screen and no pausing in between because of coding typo error. I have seen many trainers which is wasting time trying to correct the codes on the spot. For this trainer, not a second is wasted. Sparks my curiosity to learn other courses from this trainer.

By Gil Aguilar on 9/25/2023

I enjoyed this course I've taken it once before and this was my second time around. The only needed change for the project was to adjust how the BrowserRouter component is being used. Also using Routes with Route for individual links help to address the updated changes using styled components with react router dom. Highly recommended, the course is easy to follow, and will help get you up to speed really fast.

By Anonymized User on 3/11/2022

Absolutely excellent course! This is a nice short course which builds on one's existing knowledge of React to add coverage of styled components, which is a nice alternative to SASS and CSS pre-processors. I completed it in a few days while working full-time. The subject matter is handled in a very comprehensive way through the creation of a small app that is progressively enhanced as the lectures continue. In the end, we have a nice responsive app that utilizes styled components with theming to switch from a light to dark mode. Lectures covered the attrs() and css helpers, how to create a styled component that inherits styling from another styled or unstyled component, and how to reference a styled component within another styled component. Some bonus techniques I learned dealt with creating the hamburger menu icon in pure CSS for display on mobile screens and how to code an animated page loading spinner from scratch. There are some detractors who seem to expect the instructor to explain basic React concepts, like the Context API, which is outside the scope of this course. My only gripe is that Udemy has added the current year (2022 as of the time I am writing this) to the title of this course implying it is up to date, and actually there are two lectures (using React Router and referencing the Open Sans web font) that are outdated. However, one person posted a solution in the Q&A section to the React Router lecture and I posted a solution to the Open Sans font lecture so this should not stop anyone from completing the course.

By Simon Cheam on 12/6/2021

Highly recommended for any developer just starting! As someone who is new to Styled Components, this is just what I needed. Thank you, Tom! This course gets straight to the point and delivers lots of value within 2 hours. I am was really impressed. I really enjoyed how the course is broken down into mentally digestible short videos. Still lots to learn/practice, but it's a great start. Take the course and you'll be glad you did!

By André Seichi Tashiro on 10/29/2021

Para quem já programa a um tempo React vai perceber que a estrutura de pastas e organização dos arquivos e funções está bastante desorganizada e fora do padrão de mercado de trabalho. Talvez seja por questão de tempo, pois poderia consumir mais tempo organizando e então extender o curso, porém tirando isso acredito que o curso conseguiu passar bastante coisa que o styled-components tem a oferecer. Fiz o curso com typescript e não tive muita dificuldade

By Jonathan Martinez on 7/26/2020

Teaches the basics of styles-components. UNNECESARILY FAST EXPLANATIONS, had some hard times trying to keep up; sometimes is so fast is pretty annoying. I didn't quite like this course. There's a complete section where the instructor clearly goes bananas and speaks kinda tongue-twisterish. Not gonna refund the course because I did learn a couple of things, but definitely wouldn't buy another one.

By Mads Akselsen on 6/8/2020

Tom gives a great understanding of styled components. I'm now capable of using styled components on my own. Only got one remark. Tom speaks a bit too fast, so as a novice level web dev, I had to pause frequently. But this is a first world problem. I got what I came for: the ability to use styled components in my own projects.

By David Kartuzinski on 8/20/2019

\ (2019 Review) I definitely learned somethings. The teacher is a very good teacher and though short, manages to teach this enough to get the basics. At times the font-size of the editor would have been helpful if enlarged and on a white background. (Reads better) but otherwise great. (2020 Review) This is my second time through his materials. The 2020 version is different. But excellent also. I totally recommend it. He covers the important points in Styled Components.

By Michael Morris on 1/31/2019

Overall I enjoyed the course but I found the video quality to be distracting as the text etc were a bit fuzzy. I thought it might be my connection but I don't have an issue with most of the other courses I've taken. That said I think that this course is definitely good for beginners like myself.

By Julio Daniel Fernández Aguirre on 10/7/2018

This course is just what I was looking for to make styling easier in my react applications, the instructor is very clear and direct in how to use this library and considering you need to know react.js already I think is quite complete although I'd like more complex examples and maybe getting more in depth with things like svg's, animation and maybe how to apply a Grid CSS layout with this. So, yeah more examples and case scenarios would be all this needs to be a 5 star course.

Showing all 10 reviews on CourseDuck

Read all 1,208 reviews on Udemy