Styling React

Articles & Tutorials

How to use CSS Modules in React? (robinwieruch.de)
Oct 19, 2019
CSS Modules are one of the most popular ways for styling React components. Whether you are using only CSS or a more advanced pre-processor like SASS, it doesn't matter for CSS Modules: You can write all these styles in your style sheet files next to your React components.
8 Ways to Style React Components Compared (sitepoint.com)
Oct 17, 2019
There are various ways to style React Components. Choosing the right method for styling components isn’t a perfect absolute. It’s a specific decision that should serve your particular use case, personal preferences and above all, architectural goals of the way you work.
  • Praveen Kumar
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
Preferred Color Scheme in React (dev.to)
Sep 29, 2019
I have a demo that, on the fly, is able to swap the users theme from light to dark. It also remembers the persons last selected choice by saving that selection of 'dark' or 'light' to localStorage and checking there first when setting the theme on the next user visit.
  • Eric Bishard
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
Improve UX in React apps by showing skeleton UI (blog.logrocket.com)
Sep 22, 2019
A skeleton screen is a UI that doesn’t contain actual content; instead, it shows the loading elements of a page in a shape similar to actual content.
  • Paramanantham Harrison
Animating Next.js page transitions with Framer Motion (reacttricks.com)
Sep 17, 2019
I've been testing several React animation libraries and Framer Motion made the highest impression on me. In this post we'll explore how to use Framer Motion to animate Next.js page transitions.
  • Kristian Heruc
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
React Sticky Event with Intersection Observer (slightedgecoder.com)
Aug 24, 2019
This nice article on Google, An event for CSS position:sticky shows how to emulate sticky events in vanilla JavaScript without using scroll event but using IntersectionObserver. I will show how to create React components to emulate the same behavior.
  • Sung M. Kim
React — Micro-Components (itnext.io)
Aug 19, 2019
Re-think your JSX — Stop using divs and classnames
  • Edmund Reed
Draggin’ and Droppin’ in React (css-tricks.com)
Aug 16, 2019
The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more complex functionality, and if they do, it becomes very complex.
  • Maks Akymenko
How to add a dark mode to your React web app (dev.to)
Aug 16, 2019
We are currently living in a dark mode in everything era. Most apps nowadays come with a switch either at the navbar or just somewhere around its settings, that you just click and the screen goes dark.
  • Erick Wachira
The Differing Perspectives on CSS-in-JS (css-tricks.com)
Aug 13, 2019
CSS-in-JS doesn't absolve you of learning CSS. Mostly, anyway.
  • Chris Coyier
A Conceptual Look at Theming (jxnblk.com)
Aug 10, 2019
The word theme can mean a lot of different things and invoke a lot of different interpretations, which can be both a blessing and a curse.
  • Brent Jackson
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
How to add a CSS Modules Stylesheet to your React component in 4 simple steps (freecodecamp.org)
Jul 28, 2019
This can seem quite confusing at first, but really the process to implement CSS Modules can be simplified to just 4 steps, as demonstrated in the below example.
  • Holly Atkinson
Changing the Background Color in React (upmostly.com)
Jul 25, 2019
There are various ways of changing the background color of a React component, two of which we’ll explore: importing a CSS file and using inline styles.
  • James King
Next.js Practical Introduction: Styling and Theming (auth0.com)
Jul 23, 2019
Learn how to handle styling and theming while using Next.js to build server-side rendered React applications.
  • Dan Arias
How to configure Create-React-App to use TailwindCSS (blog.logrocket.com)
Jul 23, 2019
Recently, I tried using TailwindCSS in a React project bootstrapped by the Create-React-App (CRA) boilerplate and ran into difficulties setting up TailwindCSS as CRA abstracts configuration.
  • Anjolaoluwa Adebayo-Oyetoro
Why you should definitely learn how to use CSS-in-JS (jxnblk.com)
Jul 20, 2019
From time to time, I've heard that CSS-in-JS poses a barrier to entry for some people. Like any new software abstraction, CSS-in-JS is intended to abstract away some of the complexities from a lower level implementation, in this case CSS.
  • Brent Jackson
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
Self Positioning React Components (freecodecamp.org)
Jun 04, 2019
While React has ways to break the hatch and directly manipulate the DOM there are very few reasons to do this.
  • Benjamin Schachter
Getting the CSS out of rendered React components (swizec.com)
Jun 03, 2019
Here’s a fun problem for ya: How do you get the CSS from a rendered React component? Right-click, inspect element, see it in dev tools. What about programmatically?
Demystifying Flexbox in React Native (blog.bitsrc.io)
May 23, 2019
Learn how to use Flexbox with React Native.
  • Said Hayani
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
Re-invent all the wheels! (sid.studio)
May 10, 2019
My favorite way of wrapping my head around such questions is to try to implement the thing myself. So, I built a mostly-useless css-in-js library.
Why do we keep talking about CSS-in-JS? (sid.studio)
Apr 26, 2019
Remember the first time you wrote some html/css? It was amazing, right?
  • Siddharth Kshetrapal
Getting 60fps Animations in React (alligator.io)
Apr 16, 2019
In this article, learn some CSS “hacks” to get 60fps animations in React.js. If you haven’t been using them already, you might kick yourself once you see they can be the difference between jittery and silky smooth animations.
  • William Le
Overview of Popular CSS-in-JS Libraries for React (telerik.com)
Apr 10, 2019
We thought React was crazy when it came with HTML-in-JS (JSX), but today, we are happy that revolution happened. It helped us build better components. Why not do so with CSS too? As a matter of fact, you can. Meet CSS-in-JS.
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
Styling Next.js with Styled JSX (nextjs.org)
Mar 28, 2019
Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.
  • Kristian Heruc
Improve your UI with React Transition Group (blog.logrocket.com)
Mar 18, 2019
One of the most frequently overlooked principles of creating interactive UIs is transitions. Fortunately, over the last few years, React.js and other component-focused frameworks have changed the way we think about UIs and how we build them.
  • Obinna Ekwuno
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
Styling in React Native (blog.bitsrc.io)
Mar 14, 2019
Explore the best ways to style a React Native application.
  • Said Hayani
Styling in React (CSS-in-JS) (codeburst.io)
Mar 13, 2019
React is a good tool for building flexible and reuseable UI components. However organizing styles in react can be difficult sometimes.
  • Chisom Okoye
Simplifying Responsive Layouts with React Hooks (hackernoon.com)
Mar 04, 2019
Since the release of React 16.8, I’ve been enjoying the ability to use hooks to create composable and reusable logic, and write fewer class components with explicit lifecycle methods. This not only leads to a more enjoyable dev experience, but (in my opinion) a more readable code base.
  • Pedro De Ona
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
Creating a Responsive Grid in React (telerik.com)
Feb 07, 2019
Learn the basic steps to setup a React application using Flexbox to make a responsive grid.
  • Eric Bishard
CSS-in-JS and Static Rendering (frontarm.com)
Feb 02, 2019
CSS-in-JS can be a huge win for maintainability. But for large statically rendered websites, plain CSS still has its place.
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
React Semantic UI Tutorial for Beginners (robinwieruch.de)
Jan 06, 2019
A tutorial to guide you through styling your React application with Semantic UI. The UI library enables you to build websites with fast and concise HTML, along with a complete mobile responsive experience.
  • Yomi Eluwande
How to CSS in React (react.christmas)
Dec 20, 2018
A hot topic these days, and I don't think we'll ever agree, but here are some ways to do CSS in your React app
  • Eirik Luka
Let's Build a Sales Dashboard with React (telerik.com)
Oct 30, 2018
We mock-up, design and lay out a sales dashboard with native React components from KendoReact, complete with a responsive grid, data, charts and more.
  • Eric Bishard
create-react-app with CSS Modules (robinwieruch.de)
Oct 03, 2018
The article is a short how to use CSS Modules in your create-react-app application. It shows you how to setup CSS Modules, but also how to use it in your components.
create-react-app with Sass (robinwieruch.de)
Oct 03, 2018
A short guide on how to add Sass support to your create-react-app application which shows you how to setup Sass, but also how to use it in your React components.
How to make your apps pretty with styling in React (medium.freecodecamp.org)
Sep 26, 2018
When it comes to styling in React, there are just so many ways and choices of technologies to beautify your web app.
  • Vinh Le
How I integrated CSS Modules with SCSS into my React application (medium.freecodecamp.org)
Sep 23, 2018
I recently started on an Isomorphic React project. I wanted to use this opportunity to utilize tools that were on my “potential to use” list, and CSS Modules was one of them.
  • Max Goh
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
Integrating Bootstrap with React: a Guide for Developers (sitepoint.com)
May 11, 2018
Integrating Bootstrap with React allows React developers to use Bootstrap’s state-of-the-art grid system and its various other components.
  • Manjunath M
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.
A Field Guide to CSS-in-JS (medium.com)
Jan 09, 2018
You probably already have whiplash from how fast the Node/React ecosystem moves and how quickly new ideas and frameworks emerge
  • Scott Taylor
Rendering CSS on Servers for Next.js (React) Apps (scotch.io)
Jan 04, 2018
While working with Next.js, I ran into an obscure problem. This had to do with how styles are rendered on the server, and it never struck till now that styles are also first class citizens for server-side rendering.
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
All You Need To Know About CSS-in-JS (hackernoon.com)
Nov 10, 2017
No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).
  • Indrek Lasn
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

CSS Modules: Why are they great? (youtube.com)
Nov 10, 2019
Today we're talking about CSS Modules! Why are they great? Why are they cool? Why will you want to use them before the video is through?!
  • Harry Wolff
Why you should look into these React component styling options! (youtube.com)
Oct 09, 2019
Styling React components is easy and difficult at the same time. There are so many options! Inline styles, styled components, vanilla CSS, CSS modules and more. Let's take a closer look at the best alternatives!
CSS. Under the hood. (youtube.com)
Oct 03, 2019
I would like to talk a little bit about how different ways of applying CSS to our code (css classes, inline styles, css-in-js) impact browser behaviour. Lets deep dive into DOM and CSSOM building processes and actually check it out.
  • Kasia Jastrzebska
An SVG’s Tale (youtube.com)
May 03, 2019
This way, to drive your inspiration, I am going to tell you the story of an SVG image that one day made a very special friend - ReactJS. Alone and despised by its family, SVG yelled Enough! Now you’ll see what I’m all about!
  • Elizabet Oliveira
Creating layouts that last (youtube.com)
May 01, 2019
What if we could wield layout composition as an actual React component? Spoiler: that would solve the #1 issue that prevents our layouts from being truly reusable.
  • Artem Zakharchenko
Custom CSS is the path to inconsistent UI (youtube.com)
May 01, 2019
When developers have too much freedom in defining the UI, they will do things differently. The issue could be solved by avoiding any custom CSS on the app level and having a set of primitive components that allow developers to glue UI together in a consistent way.
  • Artem Sapegin
Delightful UI animations by understanding the brain (youtube.com)
May 01, 2019
Understanding this could be the key to confidently adding animations to our websites and apps. Animations with code seem hard, but they shouldn’t be. In this talk, I will give some tips and explore some tools to simplify creating animations in React.
  • Bruno Lourenço
Painting Pixels with WebGL with React Hooks (youtube.com)
Apr 24, 2019
Let's explore how Hooks can make it easier to integrate powerful GPU-driven visuals into our React apps, giving us the best of both worlds: the power of WebGL with the ease and expressiveness of a React component tree.
  • Ashi Krishnan
Designing with React (youtube.com)
Apr 24, 2019
In this talk, we'll look at the current state of design and development, and where we could go—if we're willing to push for it.
  • Mark Dalgleish
YouTube Transitions - “Can it be done in React Native?” (youtube.com)
Dec 31, 2018
In this video, we are looking at the YouTube app transitions.
Secrets to a Successful Design System (youtube.com)
Dec 17, 2018
In this talk, you'll learn how to pitch a design system to your boss, rarely discussed technical caveats and challenges, and how to set your design system up for success from the start.
  • Monica Lent
The Lonely and Dark Road to Styling in React (youtube.com)
Dec 17, 2018
Let's walk this road thogheter and I promise it will all be fine and you will leave with an ideia of type of styling is better for each project. Hint: There is no perfect way...
Nordic.js 2018 - Building a Design System in React (youtube.com)
Dec 12, 2018
This talk will take you through our journey to Polaris. An overview of what a design system is, why you would want one, and how we built ours at Shopify. I will give you a behind the scenes look into the technologies and patterns we used to build the system. React, TypeScript, CSS modules, markdown, and how they all come together to build something that both designers and developers will enjoy using.
  • Dominic McPhee
Nordic.js 2018 - Manage your styles as it's 2018 (youtube.com)
Dec 12, 2018
We will go through CSS-IN-JS libs for React with comparison, special features, documentation, SSR support and the whole developer experience.
  • Katarzyna Jastrzębska-Łachacz
Motion in React (youtube.com)
Dec 02, 2018
This talk will be a comparison of several approaches to implementing motion in React, from using CSS-in-JS tools like Styled Components, as well as animating components with vanilla JS, functional libraries, or libraries more closely tied to the ecosystem like React Motion.
  • Kaylie Kwon
Setup TailwindCSS with Next.js (youtube.com)
Nov 25, 2018
Learn how to setup TailwindCSS with NextJS.
  • Jamie Barton
The Lonely and Dark Road to Styling in React (youtube.com)
Sep 19, 2018
CSS is hard !I made a living out of it being hard but when React was introduced we had a whole new level of fighting over CSS, there are so many ways to approach it and so many tradeoffs one can do when choosing the better approach that a talk that will go over these options is more than necessary.
Custom Icons and Typographies in React Native (youtube.com)
Jun 17, 2018
Notes on custom Icons and Typographies in React Native using Expo.
The Case for Whimsy (youtube.com)
May 20, 2018
This talk explores various ways that we, as front-end developers, can make our products more delightful to use. While it’s design’s job to give us static mock-ups, it’s our job to bring those designs to life.
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.
CSS Modules in 2 minutes (youtube.com)
Apr 18, 2018
CSS Modules are not my favorite, but they're pretty much the only option when you have a bunch of existing CSS that you want to make better.
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?
Why, when, and how to use the style prop (youtube.com)
Apr 17, 2018
The style prop is great. It's there by default and it works. You should use it for one-off styling overrides or your app is gonna get unruly.
Styling your React components (youtube.com)
Apr 16, 2018
Styling is hard. There are many ways to do it. Do you go CSS, do you go css-in-js, which css-in-js do you choose?
CSS in React (youtube.com)
Mar 31, 2018
React has no standard way to style components. A slew of ideas and frameworks have grown out of the community. But, with so many CSS in JS solutions, how do you know which one to choose? In this talk, I will cover five different ways to style your React projects, and the pros and cons of each approach. From CSS Modules with SASS to Styled Components, you’ll learn how each library works so that you know which one(s) best fits your needs.
  • Joe Seifi
The Dark and Lonely Road to Styling in React (youtube.com)
Mar 20, 2018
CSS is hard ! I made a living out of it being hard but when React was introduced we had a whole new level of fighting over CSS, there are so many ways to approach it and so many tradeoffs one can do when choosing the better approach that a talk that will go over these options is more than necessary.
How to Support All Styles of Styling (youtube.com)
Dec 09, 2017
Today's front-end community is highly fragmented when it comes to styling. From good-old css, css modules, and inline styles to numerous css-in-js libraries—there is a range of options to choose from. This talk puts forth some best practices discovered while building a React component library shared across all different engineering teams at Signavio.
  • Jan-Felix Schwarz
Busting css-in-js myths (youtube.com)
Aug 31, 2017
I talk about latest happenings from the javascript/frontend world
Maintainable CSS in React (youtube.com)
Jul 20, 2017
This is a recording of my screen during my talk at the internal conference [email protected] on July 20th 2017. I talk about CSS in JS and how it can help us with css in applications.
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
styled-jsx with Next.js (youtube.com)
Jun 27, 2017
I recorded a quick video to show you an awesome CSS-in-JS solution that is styled-jsx. Check it out!
  • Jamie Barton
Concerning CSS in JS (youtube.com)
May 23, 2017
I no longer care about: specificity, CSS linters, CSS preprocessors, vendor prefixing, removing unused CSS, finding CSS dependencies and dependents. I now care more about: whether it’s fast enough, whether it’s small enough, whether it’s familiar enough. These are some of my trade-offs. Because I use CSS-in-JS.
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.
React JS Style Components - Full Stack Talks (youtube.com)
Aug 31, 2016
Talk by Michael Chan at Full Stack Talks

Courses & Video Series

Prototyping Your UX Design in React (app.pluralsight.com)
Aug 15, 2019
Give your UX design new life as a functional, interactive web page through the power of prototyping in React! This beginner-friendly course covers styling and crafting a simple application that can bring your ideas to life in new and exciting ways.
  • Lisa Walkosz-Migliacio
Intermediate React, v2 (frontendmasters.com)
Jun 11, 2019
Learn to build scalable React applications using the latest tools and techniques available in the React ecosystem! This is a modular course where you can pick and choose the various pieces of the react ecosystem you want to learn.
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
Framer UI Motion: Toggle (learnreact.design)
May 08, 2019
Learn the ins and outs of the new Framer API!
  • Linton Ye
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
React for Design (react.design)
Feb 11, 2019
This is a course built specifically for designers looking to use React for interface design.
  • Philip Davis
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
More CSS Selectors for React Developers (lynda.com)
Jan 15, 2019
Continue to bolster your CSS skill set. This course–the second in a two-part series on CSS selectors—goes over more advanced CSS selector possibilities for React developers.
  • Eric Greene
CSS Selectors for React Developers (lynda.com)
Jan 15, 2019
Learn how to work with CSS selectors as a React developer. In this course—the first installment in a series on CSS selectors—learn how to use universal selectors, attribute selectors, and more.
  • Eric Greene
Essentials of CSS for React Developers (lynda.com)
Jan 15, 2019
Learn the fundamentals of CSS and how, as a React developer, you can use this essential stylesheet language to create stylish apps.
  • Eric Greene
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.
Framer X + React (learnreact.design)
Sep 19, 2018
Get productive in Framer X. Learn React fundamentals. No coding experience required!
  • Linton Ye
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
React Recipes (lynda.com)
Jul 16, 2018
This course provides tested, easy-to-follow instructions to solve the most common challenges that React developers face every day
  • Diego Muracciole
Universal JavaScript with Next.js (next.training.leftlogic.com)
Jun 12, 2018
Zero configuration, universal JavaScript web apps with Next.js for React.
  • Remy Sharp
Level 2 React (leveluptutorials.com)
May 23, 2018
In this series, we dive into intermediate React concepts where you'll learn things like, how to use the React Context API, how to make a portal in React, how to use and understand render props as well as animated transitions and interactive animations in React.
React: Managing Complex Interactions (lynda.com)
Mar 14, 2018
Learn how to add complex interactions-hover and click interactions, navigation popups, grids and galleries, scrolling, and more-in React applications.
React 101 For Designers (learnreact.design)
Sep 29, 2017
Learn React from the beginning. Style components yourself!
  • Linton Ye
The Complete React Web Developer Course (with Redux) (udemy.com)
Sep 07, 2017
Learn how to build and launch React web applications using React v16, Redux, Webpack, React-Router v4, and more
  • Andrew Mead
React: Building Styles with CSS Modules (lynda.com)
Sep 06, 2017
This course is designed for developers in the React community who are now seeking to leverage CSS modules, components, grids, and more.

Podcast Episodes

Design Systems with Varya Stepanova (devchat.tv)
Jul 02, 2019
Varya talks about how a component library turns into a design system and shares some of her experience. She talks about how the concepts in a design system are influenced and created by the existing interface.
CSS, CSS-in-JS, and Future of the Frontend (devchat.tv)
Jun 25, 2019
The panel shares their first experiences with CSS and compares CSS and CSS-in-JS. The best ways to learn CSS is considered. The panel shares some coding tips; considering when to use libraries and when to use homegrown solutions.
Mitchell Hamilton - Writing CSS-in-JS with Emotion (fullstackradio.com)
Jun 20, 2019
In this episode, Adam talks to Mitchell Hamilton about writing your styles directly in your JavaScript components using the CSS-in-JS library Emotion.
  • Adam Wathan
  • Mitchell Hamilton
Style Guides in React with Sara Vieira (realtalkjavascript.simplecast.fm)
Jan 22, 2019
John and Dan are joined by Sara Vieira to discuss the benefits of creating style guides for the apps you're building in React.
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
Emotion with Kye Hohenberger (reactpodcast.com)
May 15, 2018
Kye Hohenberger is the author of the Emotion JavaScript library, a popular choice among React developers who prefer using CSS-in-JS to traditional CSS stylesheets. In this episode we discuss his work on Emotion including where he got the initial inspiration for the project and his motivation for creating it. We also discuss the future of the project and what may be in store for the future of CSS-in-JS.

Libraries

styled-system (jxnblk.com)3358
v5.0.21
Aug 08, 2019
Responsive, theme-based style props for building design systems with React.
  • Brent Jackson
  • John Otander
react-native-fontawesome (github.com)158
v7.0.0
Aug 02, 2019
React Native Font Awesome Icons.
  • Leandro Simões
semantic-ui-react (react.semantic-ui.com)9251
v0.87.3
Jul 09, 2019
The official Semantic-UI-React integration
  • Levi Thomason
  • Oleksandr Fediashov
react-with-styles (airbnb.io)1411
v3.2.3
Jul 04, 2019
Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation
emotion (emotion.sh)7057
v10.0.14
Jun 26, 2019
CSS-in-JS library designed for high performance style composition
  • Mitchell Hamilton
styletron-react (styletron.js.org)2643
v5.2.0
Jun 21, 2019
Toolkit for component-oriented styling.
  • Ryan Tsao
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
radium (formidable.com)6872
v0.25.2
Jun 08, 2019
Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
react-responsive (github.com)3595
v7.0.0
Jun 06, 2019
Media queries in React for responsive design.
  • Eric Schoffstall
  • Matt Thompson
react-icons (react-icons.netlify.com)2637
v3.7.0
May 10, 2019
Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
  • Goran Gajic
  • Kamijin Fanta
react-measure (souporserious.github.io)1391
v2.3.0
Apr 19, 2019
Compute measurements of a React component.
  • Travis Arnold
styled-jsx (github.com)4211
v3.2.1
Feb 11, 2019
Full CSS support for JSX without compromises
  • Giuseppe Gurgone
  • Guillermo Rauch
  • Leo Lamprecht
  • ZEIT
redux-form-material-ui (github.com)771
v4.3.4
Apr 07, 2018
A set of wrapper components to facilitate using Material UI with Redux Form
  • Erik Rasmussen