TypeScript error passing prop to styled-components

Question

I'm having a hard time solving this TypeScript issue.

...message: 'Type '{ show: boolean; children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<HTMLProps<HTMLDiv...'.
  Property 'show' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<HTMLProps<HTMLDiv...'.'

I'm using React + styled components + TypeScript. If I have a styled component like this:

const Component = styled.div`
    opacity: ${props => props.show ? 1 : 0}
`

and my React Component look like this:

const ReactComponent = (props: { appLoading: boolean }) => (
  <Component show={appLoading} />
)

I'm pretty new to TypeScript, but I assume I somehow need to define the show prop on the Component?

Answer 1

One way to give type to the show prop might be like this -

const Component = styled.div`
    opacity: ${(props: {show: boolean}) => props.show ? 1 : 0}
` 

Just added () to "props: {show: boolean}"