在连字符样式名称处超出了最大调用堆栈大小

Question

在过去的 8 个月里，我一直在一个大型项目上使用样式组件(目前使用 v4.3.2(，并且第一次遇到这个问题，我不知道如何解决或为什么会发生。以下是复制该问题的代码沙盒的链接：

https://codesandbox.io/embed/stoic-pine-5iixv

当我去向预先存在的样式化组件添加新功能时，这种情况开始发生。似乎包括withTheme Hoc是最初导致错误发生的原因。这是我在开始添加新功能之前的组件：

import styled from "styled-components";
import { Flex } from "@rebass/grid";
const InlineTabList = styled(Flex)`
border: 1px solid ${p => p.theme.grey};
border-radius: ${p => p.theme.borderRadius};
overflow: hidden;
`;
export default InlineTabList;

这是一个导致错误的非常基本的示例：

import React from "react";
import styled, { withTheme } from "styled-components";
import { Flex } from "@rebass/grid";
const Root = styled(Flex)`
border: 1px solid ${p => p.theme.grey};
border-radius: ${p => p.theme.borderRadius};
overflow: hidden;
`;
const InlineTabList = ({ children }) => {
return <Root>{children}</Root>;
};
export default withTheme(InlineTabList);

我还注意到，如果我删除 tab.js 组件中对 InlineTabList 或 TabList 的引用，那么它也会修复错误，但这是引用文档中概述的其他组件的首选方式：https://www.styled-components.com/docs/advanced#referring-to-other-components。

任何帮助将不胜感激。

Answer 1

样式化组件中的组件选择器应该只与样式化组件一起使用，而您在这里将其与 React 组件一起使用：

${InlineTabList} & {

您可以通过从InlineTabList而不是InlineTabList导入Root样式的组件来测试它，它不会给您错误。你也可以用styled()方法包装整个东西(withTheme然后就会变得多余(。

实际上，您包含的链接在以下位置上给出了答案：https://www.styled-components.com/docs/advanced#caveat

另外，我不确定这是否是因为您的最小示例，但是为什么在每个包装器组件中使用withTheme？样式化组件已经自动传递主题道具，而无需您执行此操作。