How to refer to one styled component inside another?

[thany]

Suppose I want to do this:

const Wrapper = styled.div`
  background: pink;
  > ${Inner} {
    background: bubblegum;
  }
`;

const Inner = styled.div`
  background: rebeccapurple;
`;

This doesn't work. I want Inner to have certain styles only if it's a child of Wrapper. My actual use-case is a bit more complicated than this, but this is what it boils down to, leading me to look for a way to refer to one component from within another, using styled-definitions.

Seeing how the above code will fail, what is the correct way to approach this?

[Andarist]

This should work when using our Babel plugin.

[thany]

Unfortunately, that's not good for us, as our project is based around Next.js, and doesn't use Babel at all.

Out of curiosity, why is it that Emotion can't do this without the plugin? I would imagine it'd be a "simple" matter of injecting the generated classname. I guess the Babel plugin does exactly that, but I wonder why.

[Andarist]

You are right, our Babel plugin injects a static hash into styled options. You could do this manually but u'd risk naming collisions etc

[thany]

Does it have to be static? When using the css function, that function could detect what's happening, and sort of postpone injecting classnames until they are known after they've been generated at runtime. Is that something that could work? I mean potentially.

For now I can rework some of the styling as a workaround. So maybe something to think about for a future version?

[Andarist]

It has to be static. I'm not sure how a dynamic variant could even work. The point is that you can target all instances of that component - regardless of its dynamic styles.