I am creating a Google Chrome extension and I have to encapsulate it in a Shadow DOM, using the react-shadow library. I want to style my app using styled-components, but the ThemeProvider doesn't seem to work as expected. What am I doing wrong ?
import React from 'react';
import * as ReactDOM from 'react-dom';
import root from 'react-shadow/styled-components';
import ThemeProvider from 'styled-components';
import { Theme, GlobalStyle } from './Theme';
import App from './App';
const container = document.createElement('div');
container.id = 'container';
document.documentElement.appendChild(container);
ReactDOM.render(
<ThemeProvider theme={Theme}>
<root.div>
<GlobalStyle />
<App />
</root.div>
</ThemeProvider>
container,
);
When I build and export it, I have an error :
Cannot create styled-component for component: [object Object].
Thank you !