siblings CSS rules with React styled-components / CSS modules / CSS-in-JS

Question

How to you translate rules involving siblings selectors with styled-components ? (I think it also concerns other flavors of styling through generated class names)

const Pane = styled.div`
  & > .subItem + .subItem {
    margin-top:10px;
  }
`

Answer 1

The code you posted totally works if you have static class names on children and/or siblings!

We don't currently support selecting other styled components with their generated class names, but we will very very soon! (probably this week or next week)

This is the API we're looking towards adding:

const StyledDiv = styled.div``

// All StyledDiv's directly inside a Pane will have blue text
const Pane = styled.div`
  & > ${StyledDiv} {
    color: blue;
  }
`

Follow this issue and the linked PR to be notified when it lands.