ThemeProvider not working with Rebass

[marcoamonteiro]

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]

emotion-theming is old emotion theme lib, the new @emotion/react is different with emotion-theming.

[marcoamonteiro]

I am using the new library @emotion/react. Does it not work anymore?

[iChenLei]

I don't know, Maybe create a online reproduce case is more helpful for us to debug your issue (e.g. stackblitz / codesandbox / jsfiddle ), but I think this is issue for rebass library. https://github1s.com/rebassjs/rebass/blob/HEAD/packages/reflexbox/src/index.js there is the core logic for rebass combine with ThemeProvider.

[marcoamonteiro]

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

[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).