How to reuse a ThemeProvider with styled-components?

Question

I use styled-components in a monorepo built with yarn workspaces. The folder structure is like this:

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

In theme, I export a default ThemeProvider like this:

const defaultTheme = { ... };

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

This code gets transpiled with @babel/preset-react. The output is imported in package-a and package-b (both are create-react-app projects) and added as a top-level component.

but I'm getting this error when trying to reuse the theme in either of these two packages:

index.js:1375 Component styled.div (.sc-fzXfNf) uses "props.theme" in its styles but no theme was provided via prop or ThemeProvider.

I logged the props and the theme object is empty ({}). Why is that? Is it even possible to do what I want here?

Note: I sorted this in the meantime by not creating the ThemeProvider in the theme package and exporting only the theme object - later on, I create the provider components in every react app. — Paul Razvan Berg

Paul Razvan Berg Paul Razvan Berg · Accepted Answer · 2019-11-13T17:59:12

It seems I was just mistakenly using different versions of React in the two packages. I sync-ed my dependencies, cleaned node_modules and now the code I wrote originally works fine:

const defaultTheme = { ... };

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

Note: this is within a yarn workspaces monorepo, not sure how this works with other tools.

How to reuse a ThemeProvider with styled-components?

1 Answers