styled-components.js

const ListItem = styled.li``;

const ListItem = styled.li` `;

const Dropdown = styled.div`position: relative;`

const Button = styled.button`
	  color:   palevioletred ;

	font-size : 1em   ;
`;

const TomatoButton = Button.extend`
	color  : tomato  ;

border-color : tomato
    ;

`;

Button.extend.attr({})`
border-color : black;
`

styled(ExistingComponent)`
       color : papayawhip ; background-color: firebrick`;


styled.button.attr({})`
border : rebeccapurple`;

styled(ExistingComponent).attr({})`
border : rebeccapurple`;

styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => props.small ? 'font-size: 0.8em;' : ''};
`

styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => props.small ? 'font-size: 0.8em;' : ''}
`

styled.div`
   /* prettier-ignore */
  color: ${props => props.theme.colors.paragraph};
  ${props => props.small ? 'font-size: 0.8em;' : ''};
`

styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => props.small ? 'font-size: 0.8em;' : ''};
  /* prettier-ignore */
  ${props => props.red ? 'color: red;' : ''};
`

styled.div`
  /* prettier-ignore */
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => props.small ? 'font-size: 0.8em;' : ''};
  /* prettier-ignore */
  ${props => props.red ? 'color: red;' : ''};
  /* prettier-ignore */
`

styled.div`
 ${sanitize} ${fonts}
  html {
    margin: 0;
  }
`

styled.div`
  ${bar}
  baz
`

styled.span`
  foo
  ${bar}
  baz
`

styled.div`
  foo
  ${bar}
  ${baz}
`

styled.span`
  ${foo}
  ${bar}
`

styled.div`
  ${foo} bar
`

styled.span`
  ${foo} ${bar}
  baz: ${foo}
`

styled.span`
${foo};
${bar};
`

styled.span`
${foo}: ${bar};
`

styled.span`
${foo}: ${bar}
`

styled.span`
${foo}:
${bar}
`

styled.span`
${foo}:
${bar};
`

styled.a`
  ${feedbackCountBlockCss}
  text-decoration: none;

  ${FeedbackCount} {
    margin: 0;
  }
`

const StyledComponent = styled.div`
  ${anInterpolation}
  /* a comment */

  .aRule {
    color: red
  }
`;

const StyledComponent = styled.div`
  ${anInterpolation}

  /* a comment */

  .aRule {
    color: red
  }
`;