Find the perfect coding resourcesLearn more

Learn Styled Components in React

ScrimbaScrimba
Recommended
Meet Your Instructor
Ania Kubow avatar

Ania Kubow

Instructor

Ania Kubow is a software developer and course creator who specializes in JavaScript and web development technologies. She creates engaging tutorials on modern frontend frameworks and tools.

1h 39m

Completion

Certificate included

Format

Interactive coding

Free

What You'll Learn

Introduction to Styled Components and CSS-in-JS

Why use Styled Components over traditional CSS

Setup and basic syntax of Styled Components

Setting up Styled Components from scratch

Dynamic styling through props

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! Learn how to use the Styled Components package in React by building a fun, hands-on project with software developer and YouTuber Ania Kubow. This course provides a perfect introduction to CSS-in-JS and modern React styling techniques. 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, making them a powerful tool in modern React development. 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. Thanks to Scrimba's handy interface, there is hardly any setup required for this course. You're ready to begin learning straight away and master one of the most popular CSS-in-JS libraries used in production React applications today.

Table of Contents
1
Introduction to Styled Components2:36
2
Why use them?3:45
3
Setup and Syntax8:22
4
Setting up from scratch - Project work6:51
5
Styling through Props12:00
6
Separating Components and passing props - Project work8:06
7
Extending Styles5:34
8
Extended Styles in real life examples - Project work5:34
9
Polymorphic Prop4:59
10
Passing props4:13
11
Passing props in real life examples - Project work6:59
12
If else statements in styling8:32
13
If else statements in styled Components - Project work4:33
14
Nesting4:03
15
Animations5:49
16
Rendering our Progress Tracker based on todays Date - Project4:48
17
Update your own Progress - Project1:07
18
Outro1:06

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!