javascript - 使用 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;
  }
`

请关注此问题和链接的 PR，以便在它登陆时得到通知。