CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
sylvain
sylvain

Reputation: 1971

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

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;
  }
`

Upvotes: 5

Views: 5227

Answers (1)

mxstbr
mxstbr

Reputation: 11477

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.

Upvotes: 8

Related Questions