时间戳

首页 > 解决方案 > 将样式组件道具与下一个邻居选择器结合起来不起作用

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

问题描述

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

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

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

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

const Component = styled.div<IComponent>`

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

或者我尝试过这种方式，但都没有工作：

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

标签： csssassstyled-components

解决方案

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

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

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

所以我最终得到：

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

推荐阅读