React styled-components v5 (2020 edition)

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

30 day money-back guarantee
2 hours on-demand video
Lifetime access
What you'll learn
Increase your value as a front-end / React developer
Convert or create new React apps using the the CSS-in-JS styled-components library.
Use Animations with styled components
Implement third party fonts using Google fonts
Create a mobile-first responsive layout
Style React apps using a newer, cleaner, and more efficient method 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
Learn how styled components can interact with ordinary React components & React hooks

Sign up and enroll now for

Increase your value and knowledge as a React JS developer 💵

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.

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

Course Curriculum

Available in days
days after you enroll
  Basics of styled-components
Available in days
days after you enroll
  Building out our app - layout & header
Available in days
days after you enroll
  Building out our app - login page
Available in days
days after you enroll
  Variables & theming with styled components and styled-theming
Available in days
days after you enroll
Available in days
days after you enroll

Your instructor

Hey! My name's Tom. I've taught Gatsby with various integrations to over 2,000 students and counting. My aim with this course is to increase your value as a developer and to bring you up to speed with the proper way to use this stack.