Question

在这里，我通过将回调函数传递给样式标签来访问主题。我猜样式会以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

原因是这些是不同的“道具”，并且它们在不同的时间进行评估，在第一个示例中，道具是传递给样式化组件的道具，并带有主题（如果您使用<ThemeProvider .../>，则为主题）。在第二个示例中，它是传递给组件的道具。

主题的注入是通过样式组件库完成的，并且仅对样式组件进行。您的组件无法获取它（因为它不是样式化的组件）。

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

要做的方法是简单地定义：

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

然后：

export default SectionHeading;

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

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

1 个答案: