将样式组件道具与下一个邻居选择器结合起来不起作用答案

【问题标题】：Combining styled components props with next neighbor selector not working将样式组件道具与下一个邻居选择器结合起来不起作用
【发布时间】：2021-12-14 10:23:39
【问题描述】：

我正在从活动类切换到将道具传递给样式化组件，但遇到了一个小问题。道具传递工作正常，但可能是导致问题的 css。

在过渡到道具方式之前，这部分完美地工作：

.element.is-active + .element:before {}

我假设的样式化组件道具版本看起来像这样

const Component = styled.div<IComponent>`

    ${({ isActive }) =>
      isActive
       ? `
        + &:before {
         content: none;
        }
       `
       : ''}
}

我也尝试过这种方式，但都不起作用：

+ &:before {
    content: ${({ isActive }) => isActive ? 'none' : ''};
}

【问题讨论】：

标签： css sass styled-components

【解决方案1】：

刚刚通过反复试验找到它： & 在这里签名 + &:before { 是错误的。

我认为在这种情况下 SC/css 抓取了活动元素而不是普通元素，可能会导致类似的 css 选择器

.element.is-active + .element.is-active:before

所以我最终得到了：

+ :before {
    content: ${({ isActive }) => isActive ? 'none' : ''};
}

【讨论】：