Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Learn Styled Components in React

via Scrimba

Overview

The Styled Components package is the result of wondering how to enhance your CSS for styling React component systems. So if you’re looking for a great way to style your React projects, look no further!

Why use styled components?

Styled components are helpful for many reasons. They reduce class name bugs, they make your components more readable, and they allow you to navigate your CSS more easily. They also allow for dynamic styling and automatic vendor prefixing.

What is the structure of this course? This one-hour course follows a “lesson and project” approach. You’ll learn the core concepts and complete mini-challenges to test your understanding. Then you'll put your new skills to good use with a fun and practical project.

By the end of the course, you'll have a cool progress tracker to add to your portfolio or even expand upon to show off your coding skills.

Will I need to do any setup?

Thanks to Scrimba’s handy interface, there is hardly any setup required for this course. You're ready to begin learning straight away, so let’s get started!

Syllabus

  • Introduction to Styled Components
  • Why use them?
  • Setup and Syntax
  • Setting up from scratch - Project work
  • Styling through Props
  • Separating Components and passing props - Project work
  • Extending Styles
  • Extended Styles in real life examples - Project work
  • Polymorphic Prop
  • Passing props
  • Passing props in real life examples - Project work
  • If else statements in styling
  • If else statements in styled Components - Project work
  • Nesting
  • Animations
  • Rendering our Progress Tracker based on todays Date - Project
  • Update your own Progress - Project
  • Outro
  • How to Utilize Your Certificate

Reviews

Start your review of Learn Styled Components in React

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.