ThemeProvider not working with Rebass

ThemeProvider is not applying theme

To reproduce:

Simple example from the rebass documentation and create-react-app: https://rebassjs.org/getting-started

import React from 'react';
import './App.css';
import {Heading} from 'rebass'
import { ThemeProvider } from '@emotion/react'
import styled from '@emotion/styled'

const theme = ...

function App() {
  return (
      <ThemeProvider theme={theme}>
        <div className="app">
          <Heading fontSize={7}>Hello</Heading>
        </div>
      </ThemeProvider>
  );
}

Expected behavior:

Theme is not applied to Rebass components

Environment information:

• react version: 4.0
• @emotion/react version: 11.4

[iChenLei]

https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Freact%4011.0.0 Rename @emotion/core to @emotion/react.

When you write code like import { ThemeProvider } from 'emotion-theming', your code and rebass use same one ThemeContext from @emotion/core, and if your write code like import { ThemeProvider } from '@emotion/react , your code use @emotion/react’s ThemeContext and rebass use @emotion/core 's ThemeContext, so that’s why your code not work as expected. I suggest you use emotion-theming or push rebass library author to support @emotion/react(But it’s looks like inpossible cause rebass is not a active project currently).

[marcoamonteiro]

Here’s a code example: https://codesandbox.io/s/sweet-agnesi-53h0s?file=/src/App.js