styled components结合props使用相邻兄弟选择器失效问题

问题根因 #

你的原始CSS规则.element.is-active + .element:before语义为：选中带有is-active类的element元素后紧跟的同类型element元素的:before伪元素。
之前的写法不生效是因为&使用错误：styled-components 中&指代当前组件的生成类名，你写的+ &:before对应CSS语义为「当前元素后紧跟的当前元素自身的伪元素」，和需求语义完全不匹配。

正确实现 #

以下两种写法都可以生成和你原始CSS逻辑完全一致的规则：

条件输出整段规则 #

const Component = styled.div<IComponent>`
  ${({ isActive }) => isActive ? `
    & + &:before {
      content: none;
    }
  ` : ''}
`

简写条件判断 #

const Component = styled.div<IComponent>`
  ${({ isActive }) => isActive && `
    & + &:before {
      content: none;
    }
  `}
`

上述写法最终生成的CSS规则为.组件生成的类名.is-active + .组件生成的类名:before { content: none; }，和你之前的原生CSS效果完全一致。

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