Почему тема не определена в стиле реквизита компонента?

Question

Здесь я получаю доступ к теме, передавая функцию обратного вызова в стилизованный тег.Я думаю, стиль вызывает эту функцию обратного вызова с реквизитом в качестве первого аргумента.Это хорошо работает.

export default function SectionHeading(props: SectionHeadingProps) {
    const Heading = styled.h2`
        ${props => props.theme.green && `
            color: green;
        `}
    `;

    return (
        <Heading>{propss.children}</Heading>
    );
}

В этом примере я передаю выражение, содержащее реквизиты, полученные компонентом.Здесь тема не определена.

export default function SectionHeading(props: SectionHeadingProps) {
    const Heading = styled.h2`
        ${props.theme.green && `
            color: green;
        `}
    `;

    return (
        <Heading>{props.children}</Heading>
    );
}

Почему тема не определена во втором примере?

Answer 1

Причина в том, что это разные "реквизиты", и они оцениваются в разное время, в первом примере реквизиты - это реквизиты, передаваемые в стилизованный компонент, дополненные темой (при условии, что вы использовали <ThemeProvider .../>. Ввторой пример, это реквизиты, передаваемые вашему компоненту.

Внедрение темы выполняется библиотекой styled-component и только в компоненты styleled. Ваш компонент не получает его (потому что это не стилькомпонент).

Кстати, ваш код имеет избыточную вложенность и создает стилизованный компонент каждый раз, когда он вызывается.

Для этого достаточно просто определить:

const SectionHeading = styled.div`
  ${props => (props.theme && props.theme.green && {color: 'green'})};
`;

, а затем:

export default SectionHeading;

Обратите внимание, что в вашем примере кода в первой части содержится опечатка, которую вы написали {propss.children} (дополнительно 's').