'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 |
|---|
