Rails for Front-end Development: Essential Tools/

...

/

Dynamic Styled Components

Dynamic Styled Components

Learn about Dynamic styled-components

We'll cover the following...

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:

Press + to interact
import * as React from "react"
import styled from "styled-components"
const stateColor = (status: string): string => {
  if (status === "unsold") {
    return "white"
  } else if (status === "held") {
    return "green"
  } else {
    return "red"
  }
}
interface SquareProps {
  status: string
  className?: string
}
const buttonClass = "p-4 m-2 border-black border-4 text-lg"
const ButtonSquare = styled.span.attrs({
  className: buttonClass,
})<SquareProps>`
  background-color: ${(props) => stateColor(props.status)};
  transition: all 1s ease-in-out;
  &:hover {
    background-color: ${(props) =>
      props.status === "unsold" ? "lightblue" : stateColor(props.status)};
  }
`
interface SeatProps {
  seatNumber: number
  status: string
  clickHandler: (seatNumber: number) => void
}
export const Seat = ({
  seatNumber,
  status,
  clickHandler,
}: SeatProps): React.ReactElement => {
  function changeState(): void {
    clickHandler(seatNumber)
  }
  // START: code.call_button_square
  return (
    <td>
      <ButtonSquare status={status} onClick={changeState}>
        {seatNumber + 1}
      </ButtonSquare>
    </td>
  )
  // END: code.call_button_square
}
export default Seat

Explanation

There are a few different things going on here. Let’s start by looking at the definition of ButtonSquare in the middle of the file.

This use of styled-components adds some new features. First, we start with a call to styled.span, but we chain a new method there, resulting in styled.span.attrs({ className: buttonClass }), where buttonClass is a previously defined list of our Tailwind utility classes. ...