reactjs - 如何重用带有样式组件的 ThemeProvider？

Question

我在使用yarn workspaces构建的 monorepo 中使用 styled-components 。文件夹结构是这样的：

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

在theme中，我像这样导出默认值ThemeProvider：

const defaultTheme = { ... };

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

此代码使用@babel/preset-react进行转译。输出导入package-a和package-b（都是 create-react-app 项目）并添加为顶级组件。

但是在尝试在这两个包中的任何一个中重用主题时出现此错误：

index.js:1375 组件 styled.div (.sc-fzXfNf) 在其样式中使用“props.theme”，但没有通过 prop 或 ThemeProvider 提供主题。

我记录了props并且theme对象为空（{}）。这是为什么？甚至可以在这里做我想做的事吗？

Answer 1

看来我只是错误地在两个包中使用了不同版本的 React。我同步了我的依赖项，清理node_modules了，现在我最初编写的代码可以正常工作：

const defaultTheme = { ... };

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

注意：这是在纱线工作区 monorepo 中，不确定它如何与其他工具一起使用。