TLDR:

Docs Style components inside their relevant JS with props-based variants.

Props-based variants

const Button = styled.button`
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: palevioletred;
  border: 2px solid palevioletred;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;

Extend components to add variants

Inherits all of the base component’s styles and allows for overrides or extra styles as a variant on that component

const ButtonVariant = Button.extend`
/* css here */
`;