styled-components：& + &选择器因props丢失间距的问题及最佳实践咨询

嘿，这个问题我之前也碰到过！核心原因就是styled-components会根据组件的props生成不同的类名，所以当相邻的Item组件active状态不一样时，& + &这种依赖相同类名的选择器就匹配不上了，导致margin-top丢失。下面给你几个解决办法，还有针对styled-components新手的最佳实践，帮你避坑～

方法1：给组件添加固定基础类名 #

通过attrs方法给所有Item组件绑定一个固定的基础类名，然后用这个基础类来写相邻选择器——不管active状态怎么变，基础类都存在，就能稳定匹配相邻组件了：

const Item = styled.div.attrs({ className: 'item-base' })`
  color: ${props => props.active ? 'red' : '#333'};
  
  // 用基础类选择相邻元素
  .item-base + .item-base {
    margin-top: 10px;
  }
`

方法2：用父容器控制间距（更推荐） #

把间距逻辑从Item组件本身剥离，交给父容器处理，这样组件只负责自身样式，符合单一职责原则，复用性也更强：

// 先定义一个包裹组件
const ItemWrapper = styled.div`
  // 给所有相邻的子元素设置margin-top
  > * + * {
    margin-top: 10px;
  }
`

// 使用时把所有Item放在Wrapper里
<ItemWrapper>
  <Item active={false}/>
  <Item active={true}/>
  <Item active={false}/>
</ItemWrapper>

方法3：使用:is选择器（兼容性需注意） #

:is选择器可以匹配所有符合条件的类，不管组件生成的类名是什么，不过要注意这个选择器在一些旧浏览器（比如IE）不支持：

const Item = styled.div`
  color: ${props => props.active ? 'red' : '#333'};
  
  :is(&) + :is(&) {
    margin-top: 10px;
  }
`

• 单一职责，分离样式与布局：组件自身只处理自身的样式（比如颜色、字体），布局间距、排列方式交给父容器或者专门的布局组件，这样组件在不同场景复用更灵活。
• 避免依赖动态类名的相邻选择器：像& + &这种依赖相同类名的写法，在组件有动态props时很容易失效，改用父容器控制或者固定基础类更可靠。
• 用attrs统一设置基础属性：可以通过attrs给组件添加固定的className、data属性，方便后续的样式选择或者JS操作。
• 利用ThemeProvider做全局样式管理：如果项目里有很多组件需要共享颜色、间距、字体等样式变量，用ThemeProvider把这些变量统一管理，不用每个组件都写重复的props判断。
• 保持选择器扁平：虽然styled-components支持嵌套选择器，但过度嵌套会生成复杂的CSS，影响性能也难维护，尽量保持选择器层级简单。
• 安装devtools调试：装个styled-components的浏览器扩展，能直观看到每个组件的类名、对应的样式和props，排查问题效率高很多。

内容的提问来源于stack exchange，提问作者Littlee