Dynamic Styled Components

Dynamic Styled Components

Next, let’s add some additional styling to our Seat component. First, though, we need to keep two things in mind. Our existing Seat uses many Tailwind classes for styling and we’d like to keep them. Second, we’ve been adjusting the background color of the seats based on their status and we need that to continue. The styled-components library allows us to do both of these things.

The key point here is that the components that are returned using styled-components are regular React components, which means they can be passed props and we can use those props inside the literal template string to dynamically change the value.

Here’s what the Seat looks like with some refactoring to take advantage of styled-components: