Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
inadeqtfuturs opened this issue Feb 27, 2021 · 3 comments
Closed

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

inadeqtfuturs opened this issue Feb 27, 2021 · 3 comments

Comments

@inadeqtfuturs
Copy link

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
Screen Shot 2021-02-27 at 11 02 43 AM

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
Copy link
Member

hasparus commented Feb 28, 2021

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
Copy link

Bram-Zijp commented Apr 10, 2021

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
Copy link
Member

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.

image

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

https://wzg23.csb.app/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants