illustration for Styling React Applications with Styled Components

Styling React Applications with Styled Components


Sara Vieira
23m closed-captioning
12 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed
Published 4 years ago
Updated 2 years ago


Styling your component is arguably just as important to your application as the data your displaying. But, there is a lot that goes into styling your app that can make it difficult and painful to write.

Trying to keep track of the styling on each of your components and which ones are being rendered can get confusing. Plus, deleting or rewriting your class names can get even more confusing when you can’t remember when or where you used them in your code.

If you want to add dynamic styling to your components, it’s a lot of swapping between files, possibly having to manage dozens of classes which also makes maintaining your code a real pain.

This is where styled-components excels.

styled-components makes use of ES6’s template literals so you can write your CSS inside of your React files. You can apply styling directly to HTML elements or React components. For example, styled.h1 for elements or styled(HeadingSection) for components.

The Project

Sara Vieira, one of the developers at @remote, will take you through all of the steps from styling an HTML element to animating your custom components to styling a component based on complex props.

In this cookbook-style course, you will be running through the basics of styled-components to have the ingredients necessary to implement styled-components in any React application. Ingredients such as

You’ll be coding using code sandbox so there is no need to download or install anything on your machine. It will all be done online in your browser.


The prerequisites are that you have a very basic understanding of React, HTML, and CSS. Since the code is all there for you in code sandbox, all you will have to do is follow along and apply what is taught in the lesson to your code.

What’s Next?

Can you center an HTML element? Do you know how the box model works? CSS is a fundamental language imperative to working with websites. It controls all the visual aspects of a site, from colors to layouts. To make sure you have that deep understanding of how your CSS works, CSS Fundamentals by Tyler Clark is the place to start! He goes in depth into your HTML elements and box model to help you style like a pro!

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun! Learn the Flexbox Fundamentals by Garth Braithwaite to get started on your Flexbox journey!

Course Content

23m • 12 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.