stitches
stitches copied to clipboard
styled components not passing variants
Bug report
Describe the bug
Similar to #333 ,
When composing components via styled(Component, {...})
, the variants don't seem to extend or be passed to the original styled component. In the code sandbox (https://codesandbox.io/s/hardcore-chatterjee-lktnos?file=/src/components/Button.tsx)
For Button, we're passing all the props to the styled Button component, and then composing it in StyledButton
. Unfortunately, it appears that the align
variant isn't being passed to Button
IF variants
is declared in StyledButton
.
So essentially, if a composed element has the same variant name, it just doesn't pass it down to the original component.
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
- Check out Button.tsx https://codesandbox.io/s/hardcore-chatterjee-lktnos?file=/src/components/Button.tsx
- Then look at StyledButton.tsx https://codesandbox.io/s/hardcore-chatterjee-lktnos?file=/src/components/StyledButton.tsx
- Look at how the props in
Button
aren't passingvariants
. - Comment out the
variants
inStyledButton
. - See how the props are now passing the align variant in
Button.tsx
Expected behavior
We'd like for the extended variant to pass onto the original styled component. In the example above, Button.tsx
should have been passed the align
prop even when it's declared in StyledButton.tsx
and it should have extended the styles in StyledButton
.
System information
- OS: macOS
- Browser: chrome
- Version of Stitches: 1.2.8 (latest)
- Version of Node.js: v18
Additional context
System information may not be as relevant since it's reproducible in the code sandbox.