Clever Geek Handbook

TypeScript error skipping into styled components

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

...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 am using React ++ w871 components. If I have a style like this:

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

and my React component looks like this:

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

I'm new to TypeScript, but I'm guessing I somehow need to define show support on Component?

+3


source to share


1 answer


One way to give a show

prop type could be:

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


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

+6


source






More articles:


All Articles