Targeting another emotion component does not work.

Current behavior:

I am following the docs here in order to target another emotion component. Copying the example does not work as no child component styles are applied.

To reproduce:

https://codesandbox.io/s/emotion-issue-template-ll8py?file=/src/index.js

Expected behavior:

The child component should be green but it’s red.

Environment information:

• react version: react@16.13.1
• emotion version: emotion@9.2.6

[Andarist]

The use of target seems really promising, but can that be used in conjunction with the Babel plugin? I’m guessing not since you dropped the use of the Babel Macros to demonstrate it.

The Babel plugin would probably override the manual target - it literally inserts this target to the code, this is how component selectors are implemented. I’ve just dropped using the Macros because didn’t have time to figure out why they didn’t work on the codesandbox (and they should). So I’ve prepared an equivalent demo without a Babel plugin being used - but it contains very similar code to which Babel plugin transpiles styled components.

[Andarist]

Ok, I’ve dropped using Babel Macros there as I hadn’t much time to figure out what’s wrong. I’ve prepared an equivalent demo though: https://codesandbox.io/s/emotion-issue-template-forked-odeq5?file=/src/index.js . What Babel plugin does is that it just inserts an option argument with a target property and this can be used manually with success. Can’t reproduce your problem with the project exploding - everything works fine, so you would have to prepare a repository with your issue reproduced so I could take a deeper look at your problem.