'In typescript, can I pass JSX.Element as props to styled-components?

note: Please note that my English is poor.

Here is a component that takes a parent element as props and displays a callout when it is hovered:

const Explanation = styled.span`
  // Detailed implementation is omitted.
  ${(props) => props.parent}:hover & {
    display: inline;
  }
`;

// Examples of Use
<MyButton>Button<Explanation parent={MyButton}>It's MyButton</Explanation></MyButton>

<MyDiv>Div<Explanation parent={MyDiv}>It's MyDiv</Explanation></MyDiv>

When migrating this to typescript, I get a ts(2345) error in the props.parent section.

const Explanation = styled.span<{parent: JSX.Element}>`
  // Detailed implementation is omitted.
  ${(props) => props.parent}:hover & {
    display: inline;
  }
`;

Is it possible to pass JSX.Element as props in typescript?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source