Q: How to extend types and spread props

[georgewrmarshall]

Hello, Thanks providing such a helpful example. It has greatly assisted me in the process of migrating our components that utilize polymorphic props from JavaScript to TypeScript. Specifically, our components rely on a Box component as a child, which contains style utility props such as margin and padding. I'm interested in understanding how I can extend this pattern to all of our components.

To illustrate the issue, I have created a CodeSandbox environment https://codesandbox.io/s/polymorphic-prop-type-q4pwvl?file=/src/text.tsx:622-888

In the above example I am trying to use the Box component that has the polymorphic as prop as the base for the Text component that can also forward refs, enables correct polymorphic typing but has extra logic that the Box doesn't need. I'm not sure my types are quite right or if I'm over complicating them? Any suggestions would be greatly appreciated!

[georgewrmarshall]

It also seems that I need to update the types for the Box component so it accepts spreading props?

https://github.com/ohansemmanuel/polymorphic-react-component/assets/8112138/1f6e557a-100f-4b8a-becf-fe1b9e0388e0