我们正在尝试将代码库从样式组件v3升级到v4 / 5。尽管看起来好像应该使用，但我们正在使用的模式似乎不再起作用。
模式（使用伪代码）：
// In reusable component file
const LeafComponent = (props) => whatever
const StyledLeafComponent = styled(LeafComponent)` styles which might reference connect props here `
const ReusableComponent = connectOrWithTheme(StyledLeafComponent)
// In some other file where the reusable component is being customized
const CustomizedComponent = styled(ReusableComponent)` additional context-specific styles here `
在v4和v5中，此模式对于connect（）和withTheme均失败，并且在可重用组件中未定义相应的道具（存储道具或主题）（来自connect（）的道具在叶子中也未定义）组件的样式，我们可能需要在其中引用它们）。实际上，connect（）中的mapStateToProps似乎根本没有运行！
以下只是在两者之间添加传递组件的变通办法似乎可以解决问题：
const CustomizedComponent = styled(props => <ReusableComponent {...props} />)` additional context-specific styles here `
但是这种解决方法的问题在于，很容易意外地遗漏并引入了偷偷摸摸的运行时错误，更不用说我们正在升级的代码库成为可能的运行时错误的雷区，直到我们对样式化的每种用法进行彻底的审查-与connect，withTheme以及其他可能的类似HOC（数量很多）一起使用的组件。 （我们使用的是TypeScript，因此编译器错误将很有价值）。
显然，最好的解决方案是将其固定在样式组件本身中，但目前似乎不太可能。我们花了几个月的时间来寻求比filing an issue against the styled-components repo on GitHub和reaching out in Spectrum更好的答案。我们在codeandbox上简单清晰地复制了该问题：
没有回应。
是否有比上述方法更好的解决方法？还是我们所坚持的？首先我们是否会误导使用此模式，并且应该做其他事情？当然，样式化的组件，react和redux都是流行的库，并且被许多人一起使用。这必须已经遇到和解决。