ThemeProvider doesn't pass theme to @emotion/styled context

[inadeqtfuturs]

Describe the bug
Using theme-ui's provider ThemeProvider and following the styled documentation, I'm unable to get access to the theme in the styled context.

To Reproduce
Steps to reproduce the behavior:
https://codesandbox.io/s/themeui-context-sharing-jhsto?file=/src/App.js

This code sandbox is passing a theme object to the theme-ui ThemeProvider. I'm stringifying the theme context provided by @emotion's useTheme hook and theme-ui's useThemeUI hook. The theme object @emotion returns is empty, but theme-ui has the object.

Expected behavior
@emotion's styled API should have access to the theme object passed to the theme-ui ThemeProvider.

Screenshots

Additional context
I understand that a simple solution is wrapping the two individual ThemeProviders, but it would be preferable to just have the one.

[hasparus]

Hey @inadeqtfuturs, thanks for the bug report!

Theme UI 0.3 depends on Emotion 10, and you have installed Emotion 11 — yes, Emotion doesn't share the theme context between versions.

You can either:

• Use Emotion 10.
• Force Emotion 11 with Yarn resolutions.
• Update Theme UI to next version (0.6.0-alpha) which uses Emotion 11.

[Bram-Zijp]

I have the same problem while using latest of these dependencies in a freshly setup CRA + Storybook project: theme-ui@latest + @emotion/react@latest + @emotion/styled@latest

repro: https://github.com/Bram-Zijp/theme-ui-6.1-issue/tree/main/src

Edit: Found out that it was indeed a conflict. Storybook uses emotion too, with a fresh CRA project it works fine
Working repro: https://github.com/Bram-Zijp/theme-ui-6.1-issue/tree/cra

Edit 2:
Found a neat patch that just works: https://github.com/openpatch/patches/blob/main/.storybook/main.ts
Working storybook repro: https://github.com/Bram-Zijp/theme-ui-6.1-issue/tree/fix-storybook

Below is the interesting part.

webpackFinal: async (config: any) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          "@emotion/core": toPath("node_modules/@emotion/react"),
          "@emotion/styled": toPath("node_modules/@emotion/styled"),
          "emotion-theming": toPath("node_modules/@emotion/react"),
          "@babel/preset-react": toPath("node_modules/@babel/preset-react"),
        },
      },
    };
  },

[lachlanjc]

This issue has been fixed with the release of 0.13! I just forked your sandbox & updated the dependencies, & I believe it's working as expected now.

https://codesandbox.io/s/themeui-context-sharing-forked-wzg23?from-embed=&file=/package.json

https://wzg23.csb.app/