Skip to content

Instantly share code, notes, and snippets.

@dtinth dtinth/A.jsx
Created May 1, 2018

Embed
What would you like to do?
A poll for styled-components users: https://twitter.com/dtinth/status/991373648714907648
/* 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 */
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."
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.