rebassjs/rebass

Theme spacing doesn't work on the new version of emotion-theming

mberneti opened this issue · 9 comments

mberneti commented

Theme spacing doesn't work on the @emotion/react (new version of emotion-theming) theme provider.

mberneti commented

Check this issue on this sandbox link. (The padding value were expected to be equal to 1rem)
https://codesandbox.io/s/trusting-tdd-os292?file=/src/App.js

jake-nz commented

I believe this is because you're providing context via @emotion/react -> ThemeProvider but Rebase still gets context from emotion-theming -> ThemeProvider. Those are two different contexts :(

This will require a major version bump for rebass but we haven't seen any release at all for over a year. I'm worried that this might never happen.

  • 👍7
acandael commented

I think I have the same issue. I get this error in my Next.js application:

Error: The @emotion/core package has been renamed to @emotion/react. Please import it like this import { jsx } from '@emotion/react'.

in _api.js I have this import:

import {ThemeProvider} from '@emotion/react'

Flavien-Pensato commented

@emotion/react is not compatible with the current version of emotion.

#1051

  • 👍1
theoparis commented

I can't use emotion-theming because there isn't typescript support or type definitions for it, so that's why I've tried to use @emotion/react. However, this doesn't import the theme at all... same issue here

Deleted user commented

Theme providing does not work with @emotion/react, I can't change any styles, they are not applied at all :(

jtparrett commented

Same here. Has anyone looked into the source to see if it’s much work to open a PR with the fix? I may have a look if not.

josipledic commented

This is really sad, is there anything out there similar to rebass?

Alameen688 commented

You can add a specific working version of emotion-theming to your package.json, (then run npm install) that still works instead of the latest version that gives that error.
e.g "emotion-theming": "^10.0.27",

NB: To use imports like Global you would need to install @emotion/core separately
import { Global } from '@emotion/core'; which is something you wouldn't have to do if using @emotion/react

I think I have the same issue. I get this error in my Next.js application:

Error: The @emotion/core package has been renamed to @emotion/react. Please import it like this import { jsx } from '@emotion/react'.

in _api.js I have this import:

import {ThemeProvider} from '@emotion/react'

  • 👍2
  • 🎉1
  • ❤️1