Возникли проблемы со ссылкой на другой компонент внутри компонента

Question

Я пытаюсь изменить число с плавающей точкой на элементе div в соответствии с порядком, который он показывает на странице - например, нечетное число с плавающей точкой слева, даже число с плавающей точкой справа - но ничего не происходит, когда я ссылаюсь на компонент внутри существующего компонента.

Это встроенная реакция, использующая gatsbyjs и компоненты стиля.

Я могу заставить работать &: nth-of-type (even), если я сделаю что-то вроде:

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

Но без ': до' ничего не происходит.По крайней мере, ничего, что я могу сказать.

Более конкретно - и, возможно, есть лучший способ сделать это - то, что я пытаюсь сделать, - это даже для статей в BlogList, изображение всплывает правильно.Нечетные статьи плавают влево.Я упростил свой код, так как вам не нужно видеть цвета фона и т. Д.

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

Я понял это.Оказывается, я имел в виду компоненты в обратном направлении.Хотя я уверен, что есть более четкий ответ, мне помогло следующее:

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

Answer 2

Вы должны объявить Image и Info до Wrapper, если вы ссылаетесь на них в Wrapper.

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

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

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

В противном случае, styled-component не будет знать, что это за другие компоненты.Я удивлен, что это не выдало ошибку, хотя.