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 component renders, the styled-components library generates CSS code with definitions for these styles and uses those generated CSS class names in the rendered HTML markup. In practice, this means that we’re not attaching CSS definitions to the big components we’ve already defined. Rather, we’re attaching them to the internal markup of the components that use div, and span is replaced with styled-components that define their own CSS.

CSS with React Components

Why would we do this if CSS seems good enough? CSS is great, but there are a few reasons why it’s helpful to bundle CSS with React components:

It’s easier to see what CSS applies to a component because the styling is ...