2

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 !

Léalbatroz
  • 101
  • 1
  • 3

0 Answers0