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

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 将在登陆时收到通知。