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

Question

我在用 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 Component styled.div (.sc-fzXfNf) uses "props.theme" in its styles but no theme was provided via prop or ThemeProvider.

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

Answer 1

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

const defaultTheme = { ... };

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

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

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

How to reuse a ThemeProvider with styled-components?

reactjs

styled-components

yarn-workspaces

react-context