Black Friday 2024: 25+ Ways to Save on Online Learning

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

Go to class Write review

Overview

Learn how to use the Styled Components package in React by building a fun, hands-on project with software developer and YouTuber Ania Kubow.
  • Why to use styled components
  • Setup & syntax
  • Styling through props
  • Separating components
  • Extending styles
  • Polymorphic props
  • Passing props
  • Statement-based styling
  • If-else statements in styled components
  • Nesting
  • Animations
  • How to build a progress tracker

Syllabus

  • Learn Styled Components in React
    • 1. Introduction to Styled Components
    • 2. Why use them?
    • 3. Setup and Syntax
    • 4. Setting up from scratch - Project work
    • 5. Styling through Props
    • 6. Separating Components and passing props - Project work
    • 7. Extending Styles
    • 8. Extended Styles in real life examples - Project work
    • 9. Polymorphic Prop
    • 10. Passing props
    • 11. Passing props in real life examples - Project work
    • 12. If else statements in styling
    • 13. If else statements in styled Components - Project work
    • 14. Nesting
    • 15. Animations
    • 16. Rendering our Progress Tracker based on todays Date - Project
    • 17. Update your own Progress - Project
    • 18. Outro

Reviews

Start your review of Learn Styled Components in React

Go to class

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.