Question

我正在尝试根据其在页面上显示的顺序更改div上的浮动（例如向左浮动，甚至向右浮动-但当我引用现有组件中的组件时，什么也没有发生。

这是使用gatsbyjs和styles-components在reactjs中构建的。

如果我做类似的事情，我可以让＆：nth-of-type（even）工作：

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

但是如果没有'：before'，则什么也不会发生。至少我无话可说。

更具体地说-也许还有一种更好的方法-我正在尝试为BlogList中的文章做准备，Image浮动正确。奇数物品向左浮动。我简化了代码，因为大家都不需要看背景色等。

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>
);

从理论上讲，通过我的阅读，我应该使in事件向左浮动。但我不是。我在这里想念什么？

Answer 1

如果要在Image中引用Info和Wrapper，则必须在Wrapper之前声明它们。

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

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

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

否则，styled-component将不知道这些其他组件是什么。我很惊讶它没有抛出错误。

Answer 2

我已经弄清楚了。原来我是在反向引用这些组件。虽然我肯定有一个更干净的答案，但以下是对我有用的：

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;
    }
`;

引用组件中的另一个组件时遇到麻烦

2 个答案: