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!

• Style an HTML Element with Styled Component
• Style a React Component with Styled Components
• Creating Global Styles with Styled Components
• Adjust Style based on props with Styled Components
• Animate Styled Components in React
• Create and use a Theme in Styled Components
• Style pseudo-selectors and classes in Styled Components
• Using the `css` prop to define styles in Styled Components
• Using the `as` prop to reassign the HTML tag
• Use the `attrs` method to add HTML attributes in styled-components
• Use Styled Components with the Object syntax
• Style a component based on complex props with Styled Components