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

保罗·拉兹万·伯格

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

- 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对象是空的 ({})。这是为什么？甚至有可能在这里做我想做的事吗？

保罗·拉兹万·伯格

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

const defaultTheme = { ... };

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。