Using Styled Components With React

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress. More info

Articles & Tutorials

Using styled-components in Gatsby (
Jul 10, 2019
When creating a new Gatsby.js project, there are several available options for styling. styled-components is one of the most popular CSS-in-JSS solutions, and for good reason. It’s powerful, easy to learn, and it works flawlessly with Gatsby. Let’s explore how to add it into your project!
  • Daniel Stout
Announcing styled-components v5: Beast Mode (
Jun 14, 2019
50% faster server-side rendering, 20% faster client-side rendering, 19% smaller bundle size, RTL support and no breaking changes.
  • Evan Jacobs
Iterating a React Design with Styled Components (
May 16, 2019
In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.
  • Cliff Hall
Styled components: what, why and how? (
May 15, 2019
Styled Components are a way of styling your React components using CSS and the advantages offered by ES6.
  • Christopher Kade
React Styled Components Tutorial (
Mar 30, 2019
An example of the CSS-in-JS approach is styled-components. Styled Components allow you to write plain CSS in your components without worrying about class name collisions. It helps to write CSS that’s scoped to a single component and does not leak to any other element in the page.
  • Yomi Eluwande
How to Use Sass and Styled Components in a React JS Application (
Mar 16, 2019
Today we will be covering a few popular methods to style our React JS applications such as Styled Components and Sass to explain the benefits of both.
  • Tim Smith
8 reasons to use styled-components (
Feb 28, 2019
In this article, we will be looking at some of the various benefits of styled-components and why you should consider adopting it as your preferred CSS-in-JS framework.
  • Nwose Lotanna
Why I Write CSS in JavaScript (
Feb 18, 2019
For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript. I know what you are thinking: “why would anybody write CSS in JavaScript?!” Let me explain.
Building a UI Component Library with Styled Components (
Feb 12, 2019
Don’t repeat yourself. It’s a principle that engineers strive to adhere to — preventing code duplication by abstracting shared functionality out into its own place.
  • Lee Robinson
How We Moved From Wordpress to React and Raised $80 Million (
Jan 25, 2019
Culture Trip’s website used to be a WordPress site. Now it’s a flexibile, universal (isomorphic) JavaScript App powered by Next.js, React, MobX and Styled-Components on the front-end that uses WordPress as a semi-headless CMS.
  • Yoav Ganbar
Build Better Component Libraries with Styled System (
Jan 13, 2019
Component-based design is an increasingly popular process for developing web interfaces. It was once common for organizations to rely on libraries such as Bootstrap or Material UI.
  • Alan B Smith
Announcing native support for the css prop in styled-components (
Nov 26, 2018
A new, convenient way to quickly style and iterate on your components and their boundaries has landed in styled-components!
Building a Complex UI Animation in React, Simply (
Jul 12, 2018
Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage.
  • Alex Holachek
Styling in React with styled-components (
Jun 26, 2018
styled-components is one of the most commonly used CSS-in-JS libraries for React.
  • Soumyajit Pathak
Styling with styled-components (
Apr 20, 2018
How we style our React Native app with styled-components at Magnetis
  • Luiz Parreira
Theming styled-components (
Mar 09, 2018
This tutorial explains how to create themes to handle reusable styles with styled-components in React.
Styled Components (
Feb 08, 2018
Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page
The simple guide to server-side rendering React with styled-components (
Dec 12, 2017
The goal of this guide is to share the core principles of how to use styled-components in a server side rendered React application.
  • Dennis Brotzky
How to Style React Components with styled-components (
Jul 24, 2017
Traditional styling of websites relies on having an external stylesheet with CSS. This tradition has been challenged with the advent of React and component based UI design.
  • Pat Rocchio

Video Guides & Talks

Why styled components are best (
Apr 19, 2018
Styled components are my fav approach to styling React. Best balance between normal CSS and css-in-js.
What Is CSS In JS? / What Is Styled Components? (
Apr 18, 2018
In this What Is Wednesday, I answer the question. What Is CSS In JS as well as What is Styled Components?
Part 2 - Build a UI kit with styled-components (
Jul 16, 2017
Let's use styled-components to create a shareable npm package to keep our UI consistent across multiple apps. In this video we will publish to NPM and install our package inside a create-react-app and Next.js application using Yarn.
  • Jamie Barton
Part 1 - Build a UI kit with styled-components (
Jul 15, 2017
Let's use styled-components to create a shareable npm package to keep our UI consistent across multiple apps.
  • Jamie Barton
Styling React/ReactNative Applications (
May 01, 2017
What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate solution? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about styling in this new paradigm. Let's talk about what we thought about and why we arrived where we did – 💅 styled-components.

Courses & Video Series

React Native for Designers Part 2 (
May 15, 2019
Learn to build an iOS and Android app from scratch. A 6-hour course for designers teaching custom animations, Styled Components, Redux, API data, HTML rendering with Markdown and adaptive layouts in React Native.
  • Meng To
React Native for Designers (
Feb 13, 2019
Learn to build an iOS and Android app from scratch. A 6-hour course teaching you custom animations, Styled Components, Redux, API data and adaptive layouts in React Native.
  • Meng To
CSS in JavaScript: With styled-components and React (
Feb 05, 2019
A liveVideo course that unites the best parts of ES2015, React, and of course, CSS to bring real benefits to your styling solution!
  • Dustin Schau
Pro Gatsby 2 (
Nov 02, 2018
Learn how to build the fastest websites on the planet with this Gatsby v2, a new static site generator using React.
Hands-on Web Development with React (
Sep 26, 2018
Boost your JavaScript skills by building a real-world SPA with React
  • Filip Danić
React for Designers (
Jul 24, 2018
With this course, you'll learn how to build and animate your site from scratch. Create highly customizable components for your design system. A 6-hour course for designers, by designers.
  • Meng To
React Styled Components (
Jul 20, 2018
Learn how to style your React components with React Styled Components.
  • Tom Phillips

Podcast Episodes

CSS in JS (
May 29, 2018
CSS in JS – is it good, is it bad? Una and Chris discuss this still unresolved debate.
  • Una Kravets
  • Chris Dhanaraj


styled-components (
Jun 20, 2019
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
styled-tools (
Jan 22, 2019
Useful interpolated functions for styled-components, emotion, JSS and other CSS-in-JS libraries.
  • Diego Haz