CSS and React Components
Learn about styled-components, the library that helps you include CSS and React code together.
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:
Get hands-on with 1200+ tech skills courses.