styled-container-query
styled-container-query copied to clipboard
Props inside a container-query doesn't work
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
.
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?