We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
Creating two components with the same CSS the classNames generated is the same. This is particularly bad while composing styles.
Create two components with the same style. Then create a wrapping stitches component and try to style one of the two child.
const B = styled('div', { width: '200px', height: '200px', }); const C = styled('div', { width: '200px', height: '200px', }); const A = styled('div', { [`& ${B}`]: { background: 'red' }, });
Calling A with B and C inside
<A> <B /> <C /> </A>
the resulting code will be
<div class="c-jFVahN"> <div class="c-klsufs"></div> <div class="c-klsufs"></div> </div>
and both B and C will be coloured in red
The generated classNames should be different eg.
<div class="c-jFVahN"> <div class="c-klsufs"></div> <div class="c-clmejr"></div> </div>
The text was updated successfully, but these errors were encountered:
I'm pretty consistently running into this problem, with simple patterns like this:
const Media = styled('div'); const Body = styled('div'); const Card = styled('div', { display: 'flex', variants: { direction: { row: { flexDirection: 'row', [`& ${Media}`]: { flexShrink: 0, flexBasis: '66%', }, }, column: { flexDirection: 'column', }, }, }, defaultVariants: { direction: 'column' }, });
Then both Media and Body get those properties applied. Is there any workaround in the meantime? Can I force a different class name?
Media
Body
Sorry, something went wrong.
You can use a dummy css variable to ensure a unique hash for the styles.
Hi
I have the same problem. Any updates ?
hadihallak
No branches or pull requests
Bug report
Describe the bug
Creating two components with the same CSS the classNames generated is the same. This is particularly bad while composing styles.
To Reproduce
Create two components with the same style. Then create a wrapping stitches component and try to style one of the two child.
Calling A with B and C inside
the resulting code will be
and both B and C will be coloured in red
Expected behavior
The generated classNames should be different
eg.
The text was updated successfully, but these errors were encountered: