Skip to content

Instantly share code, notes, and snippets.

@aarongarciah
Created August 20, 2020 08:57
Show Gist options
  • Save aarongarciah/2ae16780272a95bfbc46c429be85f678 to your computer and use it in GitHub Desktop.
Save aarongarciah/2ae16780272a95bfbc46c429be85f678 to your computer and use it in GitHub Desktop.
Getting theme values in CSS-in-JS lib
const Component = styled(
'div',
{
// a. Seamless
backgroundColor: 'primary',
padding: '0 1',
// b. With a prefix
backgroundColor: '$primary',
padding: '$0 $1',
// c. With a function
backgroundColor: t.colors('primary'),
padding: `${t.space('0')} ${t.space('1')}`,
// d. Object notation
backgroundColor: 'colors.primary',
padding: 'space.0 space.1',
// e. Object notation (with brackets for numbers)
backgroundColor: 'colors.primary',
padding: 'space[0] space[1]',
// f. Object notation with prefix
backgroundColor: '$colors.primary',
padding: '$space[0] $space[1]',
// g. With a theme object
backgroundColor: t.colors.primary,
padding: `${t.space[0]} ${t.space[1]}`,
// h. With a function (passing a dot notation string)
backgroundColor: t('colors.primary'),
padding: `${t('space.0')} ${t('space.1')}`,
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment