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;
}
`
Add a comment
|
1 Answer
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.
2 Comments
sylvain
maybe through adding static classNames in addition to generated ones ?
mxstbr
Yes exactly – we'll have per-component static classes (PR: github.com/styled-components/styled-components/pull/227) and when you interpolate a component we'll take that class and put it into the CSS 🎉