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

Props inside a container-query doesn't work #1

Open
nicholasmaddren opened this issue Dec 11, 2018 · 1 comment
Open

Props inside a container-query doesn't work #1

nicholasmaddren opened this issue Dec 11, 2018 · 1 comment

Comments

@nicholasmaddren
Copy link

Hey, I'd just like to say that this add-on is awesome and saved me so much pain.

I am having one issue with it though, I want to be able to set the container query by using passed props like the following example:

https://codesandbox.io/s/6wn8pvw673

When I add the minWidth prop to the :container like so:

&:container(min-width: ${props => props.minWidth}) {}

This error occurs:
Invalid attempt to destructure non-iterable instance.

@FreddyFY
Copy link
Owner

Hi @nicholasmaddren , I'm glad it helps you. 😄

This error occurs because styled-container-query parses just the strings of the template-string [without expressions] and than it passes all down to styled-components and let styled-components do the rest.

Currently i have no idea how to solve this, without rebuilding parts of styled-components.
But there should be a better error handling.

Maybe you have an idea how to solve it?

FreddyFY added a commit that referenced this issue Dec 17, 2018
@FreddyFY FreddyFY changed the title Invalid attempt to destructure non-iterable instance Props inside a container-query doesn't work Apr 26, 2019
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

2 participants