Sometimes, we want to use styled-components with props and TypeScript.
In this article, we’ll look at how to use styled-components with props and TypeScript.
How to use styled-components with props and TypeScript?
To use styled-components with props and TypeScript, we can create our own interface and use that as the type argument for the styled element function.
For instance, we write
interface Props {
onPress: any;
src: any;
width: string;
height: string;
}
const Icon = styled.Image<Props>`
width: ${(p) => p.width};
height: ${(p) => p.height};
`;
to use the styled.Image tag with the Props interface as the type argument.
And then we can get the width and height properties from the p prop parameter without errors.
Conclusion
To use styled-components with props and TypeScript, we can create our own interface and use that as the type argument for the styled element function.
