emotion-theming doesn't seem to work

[dstollie]

For our style guidelines I wanted to use this starter to have a solid base. Since this repository uses styled components and already implemented emotion-themeing. I though this was the perfect place to store our shared colors and fonts. Unfortunately emotion-theming doesn't seem to work and I don't really understand why it is not.

How to reproduce

1. Go to src/components/themeProvider.js This is the place where the EmotionThemeProvider is being added. For simplicity reason I added a new ThemeProvider which has it's own theme.
2. Replace themeProvider.js with the following contents

   
   import * as React from "react";
   import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
   import defaultTheme from "./theme";
   import styled from "react-emotion";
   import Header from "./Header";
   import "./styles.css";

const Button = styled("div") background: ${props => props.theme.colors.primary}; ;

const theme = { colors: { primary: 'green' } };

export default function ThemeProvider({ children, location }) { return (

some text {children}

); }

3. Now go back to the site.
4. You should see the text `some text` with a green background. In reality you get an `TypeError: Cannot read property 'primary' of undefined`  error since the `props.theme` property is undefined.

Considering the following documention [emotion-theming](https://emotion.sh/docs/emotion-theming#install). I expect the code above to work.

Can one of you get a working scenario?

[praveenweb]

Probably related to #28 . Let me try this out with the current version and see if it works. Else need to update dependencies to latest versions.

[alexvuong]

I am having the same problem as well

[praveenweb]

Hi @dstollie,

This has been fixed via 59eb00f

In your above example, change the import statement

from import styled from 'react-emotion'

to import styled from '@emotion/styled'

and everything should work as expected.

[rsexton404]

Can be fixed by following the Migrating to Emotion 10 instructions