具有React样式的同级CSS规则-组件/ 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，当它着陆时会收到通知。