Multiple Props Options for Styled Components

Question

I have a navbar component that I have created using Styled Components. I would like to create some props that change the background-color and/or text color.

For instanc

Answer 1

Something more elegant (I guess) and modern would be a combination of destructuring the props and using the switch statement such as:

const Button = styled.button`
  ${({primary, secondary}) => {
      switch(true) {
        case primary:
          return `background-color : green`
        case secondary:
          return `background-color : red`
      }
    }
  }
`