A poll for styled-components users: https://twitter.com/dtinth/status/991373648714907648

A.jsx

/* A */
export function Card (props) {
  return (
    <CardContainer centered={props.centered}>
      <CardTitle>{props.title}</CardTitle>
      <CardContent>{props.children}</CardContent>
    </CardContainer>
  )
}
const CardContainer = styled.article`
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  text-align:
    ${props => props.centered ? 'center' : 'left'};
`
const CardTitle = styled.h2`
  font-size: 10000px;
`
const CardContent = styled.div`
  font-family: Comic Sans MS;
`

const TRADEOFFS = [
  ":( More typing. Have to make up lots of names.",
  ":( Have to do some props-passing dance.",
  ":) Smaller total CSS size.",

  ":) No specificity hazard."
]

B.jsx

/* B */
export const Card = styled(props => {
  return (
    <article className={props.className}>
      <h2>{props.title}</h2>
      <div>{props.children}</div>
    </article>
  )
})`
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  text-align:
    ${props => props.centered ? 'center' : 'left'};
  & > h2 {
    font-size: 10000px; 
  }
  & > div {
    font-family: Comic Sans MS;
  }
`


const TRADEOFFS = [
  ":) Less typing. Less variables to work with.",
  ":) Less indirection. One set of props for a card.",
  ":( Larger CSS — whole block duplicated for each \
      permutation of props.",
  ":( Style may leak to child elements if not careful."
]