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

Question

如何使用styled-components翻译涉及兄弟选择器的规则？ （我认为它还涉及通过生成的类名称的其他风格）

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

关注this issue，并在链接的PR登陆时收到通知。