CSS and React Components

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

Including CSS with React code is such a common thought that there are oodles of libraries that handle this. I’m going to talk about one of these libraries that has an interesting way to insert CSS into your React code: styled-components.

Introducing styled-components

The styled-components library allows you 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, what this means is that we are attaching CSS definitions, not to the big components we’ve already defined, but rather, the internal markup of the components that use div and span is replaced with styled-components that define their own CSS.

Why would you do such a thing? Isn’t CSS good enough? CSS is great. However, 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 right there in the same file as the component.
• There tends to be a better separation of styling from logic, and as a result, the logic components tend to be a little cleaner.
• The library gives you some protection against style bugs, such as using the wrong CSS class. It also prevents unused CSS from being sent to the page.
• The styled-components library has nice support for global properties.

And there are a few challenges associated with bundling CSS with React components:

• I don’t love the syntax, especially for dynamic properties, and especially with TypeScript. You’ll probably want an editor plugin to help you out.
• It can be a little hard to debug the resulting CSS without additional plugins.

Overall, though, I think styled-components are pretty interesting, and worth considering in your project. Let’s add some to our project.

Installing styled-components

With TypeScript, we have to install two packages, and we’re going to install an optional third package that will give us slightly better tooling in development:

$ yarn add styled-components
$ yarn add @types/styled-components
$ yarn add babel-plugin-styled-components --dev

We need to add the babel plugin to the plugins section of the babel.config.js

Our first styled component

Let’s look at our React components and see how we can use the styled-components library. As we left it back in the React chapter, we have four components with display elements on our concert view page: a VenueHeader that adds a header, a VenueBody that controls the grid, a Row that manages a row of seats, and a Seat that actually draws an individual seat.

Our first styled-components change is in VenueHeader. We want to change the styling of the text prompt and manage the spacing a little bit. Otherwise, the functionality is the same: when the option changes, we pass the new value back to the same ticketsToBuyChanged handler, stored in the Venue component and passed to VenueHeader via a prop: