[BUG] - Custom Styled Components do not have subcomponents

[cdfornari]

trafficstars

Describe the bug

I made a custom styled Card component using the styled function

Then when trying to use subcomponents of Card component as Card.Header, I realize that it does not have the subcomponents

So I have to import Card from NextUI just to use the subcomponents

This is the error log: Property 'Footer' does not exist on type 'StyledComponent<CardComponent<HTMLDivElement, CardProps>, {}, { xs: string; sm: string; md: string; lg: string; xl: string; xsMax: string; smMax: string; mdMax: string; ... 6 more ...; light: string; }, CSS<...>>'.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Make a custom styled Card component using the styled function of a component that has subcomponents - ex: Card - Card.Header
2. Try to use its subcomponents

Expected behavior

Custom styled components are supposed to receive the parent's subcomponents so we can use them

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Safari

[jrgarciadev]

Hey @cdfornari the screenshots are not visible, could you please upload them again?

[cdfornari]

Sorry I just uploaded them again

[jrgarciadev]

Thanks!, here's an example with a workaround -> https://codesandbox.io/s/custom-styled-card-c8uoeq?file=/App.js

It looks like Stitches is not preserving the object attributes 🤔

I'll look into it, thanks for reporting it 🙌🏻

[cdfornari]

Thanks!

[stale[bot]]

Hello 👋, to help manage issues we automatically close stale issues. This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention? > This issue will be closed in 10 days if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[b-bot]

Any solution to this? The above workaround is not working with the Modal Header, Body and Footer unfortunately.