Empty theme context for 'external' components

Using a ThemeProvider with a theme, components that are separate transpiled modules (in my case UMD) inheriting {props => props.theme…} won’t work. Also tried with HoC (withTheme) where i get theme: undefined. They’re just empty.

App

import React, { Component } from 'react';
import { ThemeProvider } from 'styled-components';
import Theme from '@namics-ui/theme-blue';
import Button from './Button';
import StyledButton from '@namics-ui/test';

class App extends Component {
  render() {
    return (
	<ThemeProvider theme={Theme}>
	         <div>
		     <Button text="bla" />  // can access the theme props
		     <StyledButton text="blabla" /> // cannot access the theme props
		</div>
	</ThemeProvider>
    );
  }
}

export default App;

Component (StyledButton)

import React, { ComponentType } from 'react';
import styled, { withTheme } from 'styled-components';

interface ButtonProps {
	text?: string;
	children?: any;
}

const StyledButton = styled.button`
	background-color: ${props => props.theme.colors.main[500]};
`;

const Button: React.StatelessComponent<ButtonProps> = (props) => {
	console.log(props);
  return (
    <StyledButton>{props.text}</StyledButton>
  );
};

export default withTheme(Button as ComponentType<any>);

Tried with NPM and Yarn. I thought this worked before.

System:

• OS: macOS 10.14.3
• CPU: (12) x64 Intel® Core™ i7-8750H CPU @ 2.20GHz
• Memory: 714.37 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 11.9.0 - ~/.nvm/versions/node/v11.9.0/bin/node
• Yarn: 1.13.0 - /usr/local/bin/yarn
• npm: 6.5.0 - ~/.nvm/versions/node/v11.9.0/bin/npm

npmPackages:

• styled-components: ^4.0.0 => 4.1.3

Steps to reproduce

The easiest way to reproduce this is to setup a lerna monorepo and to add a ‘app’ that uses a ThemeProvider and a separate ‘component’ package that invokes ${props => props.theme}.

[adriankremer]

Goddammit i solved it. I studied the approach from @reakit and learned that importing styled-component twice causes different instances (importing for me is not attached to creating instances, maybe thats the reason it was so hard for me to understand).

So i solved it by creating a package that imports and exports styled-components like

import { ThemeProvider } from 'styled-components';
export { ThemeProvider }

and then reuse this package in the App like

import { ThemeProvider } from 'my-own-package';

after this the theme prop is filled with the theme props from the ThemeProvider.

[nlicitra]

For those that may be having issues with their own external library, the following worked for me.

Make styled-components an external dependency of your component library. (Documentation). This ensures that your component library uses the same instance of the styled-components package that your application is using, thus allowing all components (local and external) to be properly provided themes from the ThemeProvider.