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

Posted 2023-03-15

【中文标题】使用 React 样式组件 / CSS 模块 / CSS-in-JS 的兄弟姐妹 CSS 规则

【英文标题】：siblings CSS rules with React styled-components / CSS modules / CSS-in-JS

【发布时间】：2017-04-10 21:38:36

【问题描述】：

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

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

【参考方案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 将在登陆时收到通知。

【讨论】：

可能通过添加静态类名和生成的类名？

没错——我们将拥有每个组件的静态类（PR：github.com/styled-components/styled-components/pull/227），当您插入一个组件时，我们将采用该类并将其放入 CSS ?