How to do nested selectors?

Problem

Emotion supports nested selectors, and they can sometimes be very useful. However, it does not appear that Chakra supports this feature, even though Chakra is built on Emotion.

Is it possible to use nested selectors with Chakra, as well? I don’t see a way to do so in the documentation. I tried using the css prop to build on Emotion, but the Typescript annotations do not allow use of this prop in a Typescript project (which is what I’m using).

Proposed Solution

Maybe the Box component could add a prop called nested, which accepts a JS object of nested selectors and styles? For example:

<Box
  nested={{
    "a": { color: "#0000EE" },
    "a:visited": { color: "#551A8B;" },
  }}
>
  These <Link>links</Link> are <Link>colored</Link>!
</Box>

Note that the above example is handy for restoring standard HTML link colors after the CSSReset component removes them.

[DouglasGabr]

Other solution is to use emotion styled to use the nested selectors:

import styled from '@emotion/styled'
import { Box } from '@chakra-ui/core'

const MyCustomBox = styled(Box)`
  a {
    color: #0000EE;
    &:visited {
      color: #551A8B;
    }
  }
`

<MyCustomBox>
  These <Link>links</Link> are <Link>colored</Link>!
</MyCustomBox>

If you need to target the Link component in the selector, I think you will need to wrap it in a styled:

import styled from '@emotion/styled'
import { Box, Link } from '@chakra-ui/core'

const StyledLink = styled(Link)``

const MyCustomBox = styled(Box)`
  ${StyledLink} {
    color: #0000EE;
    &:visited {
      color: #551A8B;
    }
  }
`

<MyCustomBox>
  These <StyledLink>links</StyledLink> are <StyledLink>colored</StyledLink>!
</MyCustomBox>

This is a more advanced usage, and I think it’s required to use the emotion babel plugin for it to work

[kellyrmilligan]

I ended up using the styled method to do this as well, however I was a bit sad and it felt like an escape hatch. I really like the single part and multipart theme stuff with defineStyle functions, etc. I was hoping initially that I could do it there somehow, so I settled on a split between the theme and styled to do the things I could not do 😭

in this case, I had a container a, and on hover wanted to apply styles to different things inside the a, and could not figure out a way to do this, am I missing something or is styled the way to go?