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组件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中，不确定如何与其他工具一起使用。

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

1 个答案: