ReactJS, Technology, Typescript

Adding typehint for styled components with Typescript

Posted on by Sam

Styled components is quite nice and I have been using it for quite some time now. Using styled components with Typescript is even nicer. The moment it starts getting annoying is when you have to struggle to get the typehint working properly and then you find yourself spending more time fixing typehints than working on actual task.

I hit the same issue. Using Typehints with Styled Components. The snippet is.

const StyledModalBody = styled(Col)<{ hideImage?: boolean }>`
  padding: 0;
  margin: 0;
  /* margin-bottom: 56px; */
  margin-top: ${(props: { hideImage?: boolean }): string => (props.hideImage ? '' : '250px')};
  text-align: center;
`

Here,

hideImage

is our custom props that we can now refer  inside StyledModalBody styled component.

styled(Col)

means extend Col component and return new React Component.