如何使用样式组件重用ThemeProvider？

Question

我在用纱线工作区构建的单一功能中使用样式化的组件。文件夹结构如下所示：

- packages
  - package-a
  - package-b
  - theme

在theme中，我导出了如下所示的默认ThemeProvider：

const defaultTheme = { ... };

export default function ThemeProvider({ children }) {
  return <StyledThemeProvider theme={defaultTheme}>{children}</StyledThemeProvider>;
}

这段代码会被@babel/预设-反应转换。输出是在package-a和package-b中导入的(两者都是创建-反应-应用程序项目)，并作为顶级组件添加。

但是，当试图在这两个包中重用主题时，我会遇到这个错误：

index.js:1375 Component styled.div (..sc fzXfNf)在其样式中使用"props.theme“，但没有通过道具或ThemeProvider提供任何主题。

我记录了props，theme对象是空的({})。为什么会这样呢？我能在这里做我想做的事吗？

Answer 1

似乎我只是错误地在这两个包中使用了不同版本的React。我同步了我的依赖项，清除了node_modules，现在我编写的代码运行良好：

const defaultTheme = { ... };

export default function ThemeProvider({ children }) {
  return <StyledThemeProvider theme={defaultTheme}>{children}</StyledThemeProvider>;
}

注意:这是在纱线工作区内，不确定这与其他工具是如何工作的。