ThemeProvider doesn't work as expect

From the documentation

In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.

So I did this https://github.com/straw-hat-team/impetus_bit/blob/master/src/OTP/Core/Application.js#L40

render() {
    const shouldShowLoadingScreen = this.showLoadingScreen()
    const children = shouldShowLoadingScreen ? this.renderLoadingScreen() : this.renderBody()

    return (
      <Provider applicationStore={this.store}>
        <IntlProvider locale={navigator.language}>
          <ThemeProvider theme={Theme}>
            <BaseHold baseline={Theme.baseline} ratio={Theme.ratio} unit={Theme.unit}>
              {children}
            </BaseHold>
          </ThemeProvider>
        </IntlProvider>
      </Provider>
    )
  }

So notice I add my ThemeProvider but when I do console.log(this.props.theme) doesn’t show any theme key

Expected Behavior

I should see theme key in the props in all the components from that HoC in.

Actual Behavior

I don’t see the theme key in the props

[mxstbr]

“In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.”

Note how it says “styled-components” and NOT “react components”. Only all styled-components have access to the theme, like so:

const SomeComp = styled.div`
  colors: ${props => props.theme.primary};
`

If you want to get the theme in your normal React component you have to use our withTheme higher order component:

import { withTheme } from 'styled-components'

class SomeComp extends React.Component {
  render() {
    console.log(this.props.theme);
  }
}

export default withTheme(SomeComp);

Next time when you have a usage question please ask in the community or on StackOverflow, this is an issue tracker. Thanks!

[mxstbr]

This is likely a usage problem, please post the code where you do console.log(this.props.theme).