Styling React

Articles & Tutorials

A guide to Flexbox properties in React Native (blog.logrocket.com)
Jun 11, 2021
In React Native, this is the default way to build layouts. It works wonderfully for mobile development because it allows us to build layouts that fit multiple screen sizes, thanks to responsive design.
  • Spencer Carli
Using styled-components in TypeScript: A tutorial with examples (blog.logrocket.com)
Jun 10, 2021
In this tutorial, we’ll show you how to build and style a TypeScript app using styled-components.
  • Hafsah Emekoma
How to Design an iMessage-like Chat Bubble in React Native (freecodecamp.org)
Mar 24, 2021
Whether you're an Apple fan or not, you'll likely agree that Apple sure does have a groundbreaking UI. And iMessage is definitely an important part of that design.
  • Prajwal Kulkarni
Building a front end project with React, TailwindCSS and Storybook (medium.com)
Mar 19, 2021
To make things as easy for myself as possible, I wanted to put together a development stack that got me up and running as quickly as possible, made the mystic art of CSS as easy as possible, and gave me a way of rapidly developing, visualising, and iterating on the design of my components.
  • John Clarke
How to Make Your React Apps Responsive with a Custom Hook (freecodecamp.org)
Mar 19, 2021
How do you make your React applications responsive for any sized device? Let's see how to do so by making our own custom React hook.
  • Reed Barger
Tailwind CSS tips for creating reusable React components (blog.logrocket.com)
Mar 19, 2021
In this blog post, I’ll share some tips that I’ve found incredibly useful when building reusable React components with Tailwind.
  • Ryan Bethel
React Native styling tutorial with examples (blog.logrocket.com)
Mar 11, 2021
In this tutorial, we’ll show you how to style components in React Native. We’ll demonstrate how styling in React Native works by building an example e-commerce mobile application.
  • Emmanuel Etukudo
Styled-components vs. Emotion-JS for handling CSS (blog.logrocket.com)
Jan 21, 2021
In this article, we will compare styled-components and Emotion, including differences, drawbacks, and benefits.
  • Kasra Khosravi
Make any SVG responsive with this React component (blog.logrocket.com)
Jan 20, 2021
I initially ran into problems on mobile devices with some graphs I was working on creating. After a lot of fumbling, I made some reusable components that can shield me from this pain.
  • Paul Cowan
Sticky Table Header with React Hooks (webup.org)
Dec 01, 2020
Using a <table /> element instead of flexbox for data presentation is a good thing. How to turn the table header sticky with the help of React in that case? How to apply the solution into a production code? This blog post is all about that.
  • Miroslav Nikolov
Use CSS Variables instead of React Context (epicreact.dev)
Nov 13, 2020
I've been riding the CSS-in-JS train for years (I was even a significant contributor to the "movement"). It's awesome. I've never been so productive working with CSS than when I added a real programming language to it.
7 feature-rich alternatives to styled-components (blog.logrocket.com)
Nov 02, 2020
Here, we will be sharing some cool alternatives to styled-components that provide great value and could become the CSS-in-JS library for your next app.
  • Zain Sajjad
How to use styled-components with React Native (blog.logrocket.com)
Oct 27, 2020
In this tutorial, let’s discuss what advantages a library like styled-components has over the general StyleSheet manager in React Native.
  • Aman Mittal
How to move around blocks of code with React and Tailwind (flaviocopes.com)
Oct 27, 2020
While working on a Next.js website I had the need to move a React component to a whole different place in my markup, depending on the size of the screen.
Using Next.js with Stitches (stitches.dev)
Sep 17, 2020
A simple guide to use Next.js with Stitches.
  • Pedro Duarte
Comparing Styling Methods In Next.js (smashingmagazine.com)
Sep 17, 2020
Among others, Next.js has dubbed itself: The React Framework for Static Websites. But just like every other framework whose goal is to help you build what matters by abstracting common, redundant tasks, you’re often required to learn something new and opinionated. With Next.js, one of the things you need to know is how to integrate different CSS methods with its API, and that is the focus of this tutorial.
  • Adebiyi Adedotun Lukman
8 awesome features of styled-components (blog.logrocket.com)
Aug 05, 2020
styled-components has some cool features that many devs don’t know about. In this guide, we’ll describe some of these features and show you how you can use them to spruce up your next project.
  • Chidume Nnamdi
How To Use Styled-Components In React (smashingmagazine.com)
Jul 23, 2020
While the component-driven approach has ushered in a new frontier in the way we build web applications, it isn’t without its imperfections — one being its usability and scalability with CSS. This has given birth to a new way to construct and manage our styles in a component-specific manner, otherwise knows as CSS-in-JS.
  • Adebiyi Adedotun Lukman
How to Make a List Component with Emotion (css-tricks.com)
Jul 08, 2020
I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style things at Sentry using Emotion, which I have only passing experience with.
  • Robin Rendle
Styled-JSX for React: How and Why (blog.bitsrc.io)
Jul 01, 2020
How and why you should use styled-jsx for your React SPA and SSR apps.
  • John Au-Yeung
Let’s Build a Financial Dashboard with React (telerik.com)
Jun 17, 2020
In this tutorial we'll build a sample financial dashboard from scratch, and learn a bit about CSS grid, KendoReact, and theming in the process.
  • TJ VanToll
Everything You Need to Know About FLIP Animations in React (css-tricks.com)
Jun 16, 2020
Let’s take a look at the intersection of using the WAAPI, FLIP, and integrating all that into React. But we’ll start without React first, then get to that.
  • Kirill Vasiltsov
Understanding React Native linear gradient (blog.logrocket.com)
Jun 10, 2020
Gradients come in handy when trying to create multi-color backgrounds or custom buttons. We'll look at how to add linear gradients to our React Native apps.
  • Kitavi Joseph
Building Reusable React Components Using Tailwind (smashingmagazine.com)
May 25, 2020
Tailwind is a popular utility-first CSS framework that provides low-level class names to web developers. It does not have any JavaScript and works well with existing frameworks such as React, Vue, Angular, Ember, and others. Whilst this is positive, it can be confusing for new developers to understand how to integrate Tailwind in their applications.
  • Tilo Mitra
What is Tailwind CSS and How Can I Add it to my Website or React App? (freecodecamp.org)
May 19, 2020
CSS is a technology that can be your best or worst friend. While it's incredibly flexible and can produce what seems like magic, without the proper care and attention, it can become hard to manage like any other code. How can Tailwind CSS help us to take control of our styles?
  • Colby Fayock
Styling Components In React (smashingmagazine.com)
May 14, 2020
React is a fantastic JavaScript library for building rich user interfaces. It provides a great component abstraction for organizing your interfaces into well-functioning code, but what about the look and feel of the app? There are various ways of styling React components from using stylesheets to using external styling libraries.
  • Shedrack Akintayo
Building a React Component Design System (blog.bitsrc.io)
May 14, 2020
Build a React design system to speed and standardize web application development.
  • Jonathan Saring
How to CSS Style in React (robinwieruch.de)
May 10, 2020
Follow me on this React journey to learn more about these different strategies and approaches in CSS to style your React components.
Implementing Dark Mode In React Apps Using styled-components (smashingmagazine.com)
Apr 28, 2020
In this article, we’ll learn how to efficiently implement dark mode in a React app on a simple web page, using the styled-components library and leveraging some React features like hooks. We will also discuss the pros and cons of dark mode and why it should be adopted.
  • Blessing Krofegha
Add Theme-ui to Next (richardhaines.dev)
Apr 24, 2020
Today i decided to finally take the plunge and start learning NEXTjs. I've been working with Gatsby for two over years now, have created many sites and themes and generally feel very comfortable in that environment. But it was time, finally to bite the bullet and see what all the fuss was about!
  • Richard Haines
3 Ways To Theme React Components (blog.bitsrc.io)
Apr 20, 2020
My favorite ways to theme React components.
  • Chidume Nnamdi
Styled System Revisited (varun.ca)
Apr 19, 2020
Much has changed in the world of Styled System since my last post. There are fewer packages to deal with; it is much more performant and has a more straightforward and powerful API.
  • Varun Vachhar
Theming React Components with CSS Variables (blog.bitsrc.io)
Apr 03, 2020
Using CSS custom properties for React theming.
  • Eden Ella
Converting CSS In React to Styled Components (scotch.io)
Mar 31, 2020
Styled Components is one of those interesting topics that developers love to argue about. It's a brand new way of doing things that many people just aren't ready to acknowledge. Regardless, just because something is different doesn't mean it isn't worth a try.
  • James Quick
Using Tailwind CSS with Create React App (daveceddia.com)
Mar 30, 2020
I’ve been hearing a lot about Tailwind CSS lately and I wanted to give it a try, but I wanted to combine Tailwind with Create React App. In this post I’ll show you how to use Create React App with Tailwind CSS in just a couple quick minutes.
Getting started with styled-components in React (emgoto.com)
Mar 13, 2020
If you’re looking for a way to write easily maintainable and portable CSS in React, you may be interested in using the styled-components library. It’s one of a number of CSS in JS libraries that let you skip some of the pains that you may otherwise experience dealing with large and unwieldy .css files.
  • Emma Goto
Build responsive components in Gatsby with artsy/fresnel (blog.logrocket.com)
Mar 06, 2020
In this article, we’ll learn how to build responsive components in React using the @artsy/fresnel package.
  • Yomi Eluwande
React Styled Components: Inline Styles + 3 Other CSS Styling Approaches (freecodecamp.org)
Mar 06, 2020
There are four different ways to style React application, and in this post you will learn about them all. Let’s start with inline styling.
  • Nathan Sebhastian
Setting Up Tailwind CSS In A React Project (smashingmagazine.com)
Feb 24, 2020
This article introduces Tailwind CSS, a CSS library that gives you all of the building blocks you need to build bespoke designs without opinionated styles. You’ll also learn how to seamlessly set up Tailwind CSS in a React project.
  • Blessing Krofegha
Developing responsive layouts with React Hooks (blog.logrocket.com)
Feb 21, 2020
CSS is the perfect tool when it comes to creating responsive websites and apps, that’s not going to change any time soon. However, sometimes in a React application, you need to conditionally render different components depending on the screen size.
  • Ben Honeywill
Styling React Native Apps (alligator.io)
Feb 12, 2020
If you ever used React Native, you probably realized it doesn’t use normal HTML & CSS like a web application. In this guide, we will discuss the differences. And one of the main differences you will see is everything is automatically styled based on Flexbox.
  • Stephen Hartfield
ReactNative: Translucent TabBar (itnext.io)
Feb 04, 2020
I want to bring light on how to make it in ReactNative with react-navigation TabBar.
  • Alex Melnyk
Why styled-components? (medium.com)
Feb 04, 2020
One question I see on Twitter and such often is why a developer should choose styled-components over other CSS-in-JS libraries (and other forms of CSS in general).
  • Evan Jacobs
How to Create a Themes Engine Using CSS Variables and React Context (freecodecamp.org)
Jan 29, 2020
In this tutorial I'll show you how to integrate them with React to create a ThemeComponent (with context!).
  • Dor Shinar
Next.Js boilerplate with TailwindCss and SASS (codeburst.io)
Jan 27, 2020
Let’s combine all these powerful tools to build awesome products.
  • Nirazan Basnet
Understanding CSS-in-JS (telerik.com)
Jan 02, 2020
We're going to learn about CSS-in-JS, the powers of this technique and how we can create better applications by writing our CSS code with JavaScript.
  • Leonardo Maldonado
Styled Components, Styled Systems and How They Work (rangle.io)
Dec 12, 2019
In React, there are two libraries that work together to make the creation of presentational components very simple: styled-components and styled-system.
  • Chris DePaul
Are You Drowning In A Pile Of Styled React Components? (codeburst.io)
Nov 22, 2019
But beware! You may step into the too-many-imports-trap or fall into the maelstrom of abstraction, too.
  • Frank Zickert
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
Component Based Design System With Styled-System (varun.ca)
May 11, 2018
Component-based design system is the practice of splitting the UI into small, isolated and more manageable parts; backed by a set of design constraints. It builds upon ideas such as Atomic Design, Style Guides and Component-Based Architecture.
  • Varun Vachhar
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

Functional React With Styled Components (youtube.com)
Apr 23, 2021
Learn how to create clean, beautiful React UIs! Shaundai Person will teach us how to combine function-style React components with Styled Components.
  • Jason Lengstorf
  • Shaundai Person
Restyle - React Native Fashion (youtube.com)
Jul 10, 2020
In this series, we are building a React Native App from 0 to 1.
React Material-UI Themes: Customize Material Components for your Project (youtube.com)
Jun 24, 2020
In this video, we will have a look at how you can customize react material-ui to align with your company identity (design system) and products.
  • Bruno Antunes
React & Tailwind CSS Image Gallery (youtube.com)
Apr 09, 2020
In this project we will integrate Tailwind CSS with React and build an image gallery app with the Pixabay API.
Using React Hooks to Style CSS Flexbox or Grid Rows (youtube.com)
Mar 06, 2020
In this video I write a hook that will allow me to target and style flex or grid items based on their row. Something that currently isn't possible with just CSS.
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 JS@PayPal 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