RFC: Component Selector

I was chatting to @markdalgleish at Reactive conf and he had this great idea to implement a other-styled-component-selector.

The API would look like this:

const Button = styled.button`some: styles;`

const Box = styled.box`
  > ${Button} {
    // A button component nested within a box will have these styles
    other: styles;
  }
`

This would allow you to override styles of children, and from children react to parents, too! What do you think?

[mxstbr]

I am not convinced that styling children from the parent is something to encourage.

It’s not something we will encourage, but that doesn’t mean the possibility shouldn’t be there. The same thing applies to nesting, I try to avoid nesting as much as possible and we could’ve made it impossible in styled-components, but it does have it fringe use cases and we want to cover all the ground.

[wmertens]

I am not convinced that styling children from the parent is something to encourage.

In any case, when it is unavoidable, like when you are making a layout component based on flexbox, I do something like

const Layout = styled.div`
  display: flex;
  & > * {
    flex: 1;
  }
`

The child selectors are also very useful for these purposes.