Skip to content

Instantly share code, notes, and snippets.

@nautilytics
Created May 12, 2021 18:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nautilytics/bd47a7f82c45358061cc31dd9e6331c2 to your computer and use it in GitHub Desktop.
Save nautilytics/bd47a7f82c45358061cc31dd9e6331c2 to your computer and use it in GitHub Desktop.
Passing in a custom property to a `styled` component and including `$theme`
interface StyledProps {
readonly active: boolean;
}
const DateInput = styled<StyledProps, 'div'>('div', ({
$theme,
active,
}) => ({
borderRadius: '2px',
background: '#EDEDED',
width: '75px',
height: '30px',
padding: '5px',
border: active ? `1px solid ${$theme.colors.accent}` : 'none',
}));
...
<DateInput active={true}/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment