Pattern for styled components with lots of states

styled-components.js

import styled, { css } from 'styled-components';

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  
  /* This gets hard to read if there is more than one state: */
  background: ${props => props.primary && 'palevioletred'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
`;

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  color: palevioletred;

  /* Use nested css blocks instead: */
  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;