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

Building Reusable React UI Components with styled-components (blog.bitsrc.io)
Oct 07, 2019
Learn how to use styled-components with Bit to create a reusable UI component.
  • Sonny Recio
A Dark Mode Toggle with React and ThemeProvider (css-tricks.com)
Sep 25, 2019
In this tutorial, we’re going to build a toggle that allows users to switch between light and dark modes, using a <ThemeProvider wrapper from the styled-components library.
  • Maks Akymenko
Hamburger Menu with a Side of React Hooks and Styled Components (css-tricks.com)
Sep 10, 2019
I decided to build my own simple hamburger with sidebar. No pickles, onions or ketchup. Just meat, bun, and a side of menu items.
  • Maks Akymenko
How to Redesign Unsplash Using Styled Components (sitepoint.com)
Aug 29, 2019
Writing future-proof CSS is hard. Conflicting classnames, specificity issues, and so on, come up when you have to write and maintain thousands of lines of CSS. To get rid of the aforementioned issues, Styled Components was created.
  • Akshay Kadam
Progress Bar On Page Scroll Using React and styled-components (alligator.io)
Aug 07, 2019
Let’s re-implement the progress bar on page scroll effect that you may have seen on many popular blogs including this one.
  • Daniel Eze
Using styled-components in Gatsby (alligator.io)
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
Theming Styled Components in 2019 (Part 2) (starikov.dev)
Jun 14, 2019
This is a continuation of my previous blog post on this subject.
  • Herman Starikov
Theming Styled Components in 2019 (starikov.dev)
Jun 14, 2019
In this post, I will go over the theming approaches I have seen, and new libraries that came out as recently as June 2019.
  • Herman Starikov
Announcing styled-components v5: Beast Mode (medium.com)
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 (css-tricks.com)
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? (dev.to)
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 (robinwieruch.de)
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 (dev.to)
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 (blog.logrocket.com)
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 (mxstbr.com)
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 (medium.com)
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 (medium.com)
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 (medium.com)
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 (medium.com)
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 (css-tricks.com)
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 (able.bio)
Jun 26, 2018
styled-components is one of the most commonly used CSS-in-JS libraries for React.
  • Soumyajit Pathak
Styling with styled-components (medium.com)
Apr 20, 2018
How we style our React Native app with styled-components at Magnetis
  • Luiz Parreira
Theming styled-components (alligator.io)
Mar 09, 2018
This tutorial explains how to create themes to handle reusable styles with styled-components in React.
Styled Components (flaviocopes.com)
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 (medium.com)
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 (codeburst.io)
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 (youtube.com)
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? (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (designcode.io)
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 (designcode.io)
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 (manning.com)
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 (leveluptutorials.com)
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 (packtpub.com)
Sep 26, 2018
Boost your JavaScript skills by building a real-world SPA with React
  • Filip Danić
React for Designers (designcode.io)
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 (udemy.com)
Jul 20, 2018
Learn how to style your React components with React Styled Components.
  • Tom Phillips

Podcast Episodes

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

Libraries

styled-components (styled-components.com)22188
v4.3.2
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 (github.com)592
v1.7.1
Jan 22, 2019
Useful interpolated functions for styled-components, emotion, JSS and other CSS-in-JS libraries.
  • Diego Haz