CSS and React Components

Introduction

Where Stimulus encourages using the markup we are already writing, therefore keeping CSS in its own separate files, React encourages thinking about CSS and code together. Once we get in the habit of thinking of our page as made up of a number of different React components, it’s a small step to imagine those components containing their own CSS for features that are specific to that component.

Including CSS with React code is so common that there are many libraries that can handle this. We’re going to talk about one of these libraries that has an interesting way to insert CSS into our React code: the styled-components library.

Introducing styled-components

The styled-components library allows us to define React components that include CSS styles inside the definition of the component. When the ...