Referring to other components within sx?

[evanfrawley]

Hi!

Absolutely love the theme-ui, thank you for building it :)

When I used it, one of my favorite parts of using styled-components was referencing other components to do complex styling, such as hovering over a parent to trigger some styles on a child.

Right now, I am accomplishing this by setting a className on the child that I want to change styling of and using

// within the parent component `sx`
"&:hover": {
    "& > .childComponentClassName": {
        ...styles
    },
},

I am wondering if there are plans to reference other components such that I can do

// within the child component `sx`
`${ParentComponent}:hover`: {
        ...styles
},

[lachlanjc]

Unfortunately this is not possible with Theme UI right now, since instances of components aren’t reference-able in the same way. I’d love for this syntax to be possible, though:

<Heading sx={{ [Badge]: { bg: 'green', ml: 3 } }}>
  Welcome!
  <Badge>2</Badge>
</Heading>

(I tried it, doesn’t work :( https://repl.it/@lachlanjc/theme-ui-referencing)