Reactjs 在引用组件中的另一个组件时遇到问题

我试图根据div在页面上显示的顺序来更改它的浮点值，例如奇数左浮点值，偶数右浮点值，但是当我引用现有组件中的组件时，什么都没有发生

这是使用gatsbyjs和styles组件内置的reactjs

如果执行以下操作，我可以使第&:n个类型（偶数）正常工作：

${Image}:before {
    background: red;
}

但是没有“：在“之前”什么都不会发生。至少我什么也说不出来

更具体地说，也许有更好的方法可以做到这一点，我想做的是，即使是博客列表中的文章，图像也会向右浮动。这些奇怪的物品飘向左边。我简化了我的代码，因为你们不需要看到背景色等

const Wrapper = style.article`
    &:nth-of-type(even) {
        ${Image} {
            float: right;
        }
    }
`;

const Image = style.div`
    float: left;
`;

const Info = style.div`
    float: right;
`;

const BlogList = ({ title, cover, excerpt }) => (
    <Wrapper>
        <Image>
            <Img fluid={cover} />
        </Image>
        <Info>
            <h2>{title}</h2>
            <p>{excerpt}</p>
        </Info>
    </Wrapper>
);

const Wrapper=style.article`
&：第n个类型（偶数）{
${Image}{
浮动：对；
}
}
`;
const Image=style.div`
浮动：左；
`;
const Info=style.div`
浮动：对；
`;
const BlogList=（{标题、封面、摘录}）=>(
{title}
{摘录}

);

---

理论上，我读到这篇文章的时候，我应该让In-event向左浮动。但我不是。我这里遗漏了什么？

如果在

包装器中引用它们，则必须在
包装器
之前声明
图像
和
信息

const Image = style.div`
    float: left;
`;

const Info = style.div`
    float: right;
`;

const Wrapper = styled.article`
  ${Info} { ... }
  ${Image} { ... }
`

否则，
样式化组件将不知道其他组件是什么。我很惊讶它没有抛出一个错误。
我已经解决了这个问题。事实证明我是在反向引用组件。虽然我确信有一个更清晰的答案，但以下是对我有用的：

const Wrapper = styled.article`
`;

const Image = styled.div`
    ${Wrapper}:nth-of-type(odd) & {
        float: left;
    }
    ${Wrapper}:nth-of-type(even) & {
        float: right;
    }
`;

const Info = styled.div`
    ${Wrapper}:nth-of-type(odd) & {
        float: right;
    }
    ${Wrapper}:nth-of-type(even) & {
        float: left;
    }
`;

为什么
const
关键字和变量名之间有等号？这就是我打字太快的原因。这里没有等号。如果我只在
Wrapper
中应用浮点数，可能您也需要使
Info
向左浮动，如下所示：`&:n类型（奇数）{${Image}{float:right；}${Info}{float:left；}}&:n类型（偶数）{${Image}{float:left；}${Info}{float:right；}}{它…仍然不起作用。现在没有任何浮动。我确信我在${component}和开头的花括号之间遗漏了一些东西，但我尝试过的都不起作用。