Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

styled components not passing variants #1140

Open
smol-honk opened this issue Feb 10, 2023 · 0 comments
Open

styled components not passing variants #1140

smol-honk opened this issue Feb 10, 2023 · 0 comments

Comments

@smol-honk
Copy link

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:

  1. Check out Button.tsx https://codesandbox.io/s/hardcore-chatterjee-lktnos?file=/src/components/Button.tsx
  2. Then look at StyledButton.tsx https://codesandbox.io/s/hardcore-chatterjee-lktnos?file=/src/components/StyledButton.tsx
  3. Look at how the props in Button aren't passing variants.
  4. Comment out the variants in StyledButton.
  5. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant