为什么主题在样式组件道具中未定义？

Question

在这里，我通过将回调函数传递给样式化标签来访问主题。我猜 styled 调用这个回调函数时将 props 作为第一个参数。这很好用。

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

原因是它们是不同的"props"并且它们在不同的时间被评估，在第一个例子中，道具是传递给样式化组件的道具，增加了主题（前提是你使用了<ThemeProvider .../>。在第二个例子中，它是传递给你的组件的道具。

主题的注入是由样式组件库完成的，并且只针对样式组件。您的组件没有得到它（因为它不是样式化组件）。

顺便说一句，您的代码有冗余嵌套，每次调用时都会创建一个样式化的组件。

方法是简单定义：

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

然后：

export default SectionHeading;

请注意，您的示例代码在第一部分中有一个拼写错误，您写了 {propss.children}（一个额外的 's'）。

为什么主题在样式组件道具中未定义？

Why is theme undefined in styled component props?

styled-components