兄弟姐妹CSS规则与React样式组件/ CSS模块/ CSS-in-JS

Question

如何翻译涉及带有样式组件的兄弟选择器的规则？(我认为它还涉及通过生成的类名称的其他样式的样式)

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

Answer 1

如果您对儿童和/或兄弟姐妹有静态类名,那么您发布的代码完全有用!

我们目前不支持使用生成的类名选择其他样式组件,但我们很快就会这样做!(可能是本周或下周)

这是我们希望添加的API:

const StyledDiv = styled.div``

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

请关注此问题,并在链接的PR登陆时收到通知.