Skip to content

Instantly share code, notes, and snippets.

@lachlanjc
Created August 21, 2016 00:41
Show Gist options
  • Save lachlanjc/09b12682c127c09b6b923221f37df6c1 to your computer and use it in GitHub Desktop.
Save lachlanjc/09b12682c127c09b6b923221f37df6c1 to your computer and use it in GitHub Desktop.
Styling multiple elements with react-cxs
const Header = () => {
const cx = {
root: {
backgroundColor: colors.blue,
color: colors.white,
paddingBottom: space[4],
paddingTop: space[4]
},
container: {
margin: 'auto',
maxWidth: '48rem'
},
header: {
fontWeight: 'bold'
},
subheader: {
fontWeight: 'normal'
}
}
return (
<header className={cx.root}>
<div className={cx.container}>
<h1 className={cx.header}>Header</h1>
<h3 className={cx.subheader}>Subheader</h3>
</div>
</header>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment