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.

Sign up for GitHub

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

Jump to bottom

ThemeProvider docs example: Cannot read property 'color' of undefined #378

Closed
egorovli opened this issue Oct 4, 2017 · 1 comment
Closed

ThemeProvider docs example: Cannot read property 'color' of undefined #378

egorovli opened this issue Oct 4, 2017 · 1 comment

Comments

@egorovli
Copy link

egorovli commented Oct 4, 2017 •
edited
Loading

Hi.

  • emotion version: ^7.3.2
  • emotion-theming version: ^8.0.2-10
  • react version: ^16.0.0

Relevant code (copy-paste from the emotion-theming#usage docs):

/** child.js */
import React from 'react';
import styled from 'react-emotion';

const Container = styled.div`
  background: whitesmoke;
  height: 100vh;
`;

const Headline = styled.h1`
  color: ${props => props.theme.color};
  font: 20px/1.5 sans-serif;
`;

export default Page extends React.Component {
  render() {
    return (
      <Container>
        <Headline>
          Im red!
        </Headline>
      </Container>
    );
  }
}

/** parent.js */
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'emotion-theming';

import Page from './child.js';

const theme = {
  color: 'red',
};

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Page />
      </ThemeProvider>
    );
  }
}

// this assumes the HTML page template has a <main> element already inside <body>
ReactDOM.render(<App />, document.querySelector('main'));

What you did:

I just tried to run the example from the docs 😅.

What happened:

screen shot 2017-10-04 at 15 23 33

Reproduction:

Run the code from the docs.

Problem description:

Running the example from the emotion-theming#usage docs throws the Uncaught TypeError: Cannot read property 'color' of undefined.

Seems like theme is not passed through context to descendants of <ThemeProvider>. The only workaround is to explicitly use withTheme HOC, i.e.:

const Headline = withTheme(styled.h1`
  color: ${props => props.theme.color};
  font: 20px/1.5 sans-serif;
`)

Suggested solution:

😅
@egorovli
Copy link
Author

egorovli commented Oct 6, 2017

The issue seems to be resolved after upgrading to

"emotion": "^8.0.2",
"emotion-theming": "^8.0.2",
"react-emotion": "^8.0.2"

👍

@tkh44 tkh44 closed this as completed Oct 6, 2017
@Bhanditz Bhanditz mentioned this issue Feb 9, 2021
Open
@penx penx mentioned this issue Feb 10, 2021
Open
@Bhanditz Bhanditz mentioned this issue Apr 26, 2022
Open
@Bhanditz Bhanditz mentioned this issue Apr 30, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tkh44 @egorovli