const Button = styled.button`
  display: block;
  background: lightgreen;
`

const Container = styled.aside`
  > ${Button} {
    background: yellow;
  }
`

const SafeSibling = styled(() => (
  <div>
    <Button>Safely nested</Button>
  </div>
))``

const ExtendedSibling = styled(Button)`
  font-weight: bold;
`

const FragmentSibling = styled(({ children }) => (
  <>
    <Button>{children}</Button>
  </>
))``

const Modal = () => (
  <Container>
    <Button>Extended on purpose</Button>
    <div>
      <Button>Don't select me because I'm deeper</Button>
    </div>
    <SafeSibling />
    <ExtendedSibling>A sneaky extension</ExtendedSibling>
    <FragmentSibling>A sneaky fragment</FragmentSibling>
  </Container>
)

ReactDOM.render(<Modal />, document.getElementById('app'));