reactjs - 如何使用 react-shadow 在 Shadow DOM 中添加样式化组件 ThemeProvider？

Question

我正在创建一个 Google Chrome 扩展，我必须使用 react-shadow 库将它封装在 Shadow DOM 中。我想使用 styled-components 设置我的应用程序的样式，但 ThemeProvider 似乎没有按预期工作。我究竟做错了什么 ？

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,
);

当我构建和导出它时，我有一个错误：

无法为组件创建样式化组件：[object Object]。

谢谢 ！