Styling React Applications with Styled Components

Intro

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.

Prerequisites

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!