Styling in React

How to style React components? This is a very big question with a lot of possible answers. In this topic we collected some of the most common approaches and libraries that can help you with defining the style of your react components.

6 resources available

The simple guide to server-side rendering React with styled-components

The goal of this guide is to share the core principles of how to use styled-components in a server side rendered React application. The beauty of styled-components really shines through when you realize how seamless it is to setup in your application. Furthermore, styled-components are easy to integrate [continue]

Article by Dennis Brotzky

Getting Started with styled-components

Up until December last year I didn't really like styling anything at all with CSS, it was a chore rather than something I enjoyed doing. This was until I started using styled-components. I want to share what I have learned so far by going through styling a basic react application. [continue]

Tutorial by Scott Spence

CSS Block - Blazing fast CSS for your Design Systems and App Components

CSS Blocks is an ergonomic, component-oriented CSS authoring system that compiles to high-performance stylesheets. By combining an opinionated authoring system, build-time analysis and rewriting of templates, and a new type of CSS optimizer, css-blocks breathes new power and ease of use into the technologies [continue]

Library by LinkedIn

reset.css for styled-components

Library by Zac Anger

Handling spacing in a UI component library

Building a highly consumable UI component library is no easy feat and this article will focus on one particular tricky aspect of it: outer component spacing. [continue]

Article by Chris Pearce

Animating React Components with CSS and Styled-Components

There are a lot of great resources on how to do animations with CSS and there are a lot of great resources on how to do styling in React but there are relatively few resources on how to do them both together. One would think that if I knew one and the other that I'd smush them together to make two. That's [continue]

Article by Kyle Truong

Ways to style React components / Inline Styles with React / How to style React Components with styled-components / React style attribute / JSX className attribute / Using CSS Modules with React