使用 renderToString 将组件渲染为传单标记会丢失主题

Question

我们有一个使用样式化组件的 React 项目，其中的 ThemeProvider 提供了所有组件都应该能够引用的主题对象。在这个项目中，我们有一个传单地图，我们以标记的形式向其中添加 React 组件，使用ReactDOMServer.renderToString. 当它尝试访问theme组件的样式时，theme未定义。按照正常方式添加组件，即可正常工作。

我可以通过手动将主题对象导入到地图组件中，并将主题对象作为属性传递给标记组件来强制它工作，但这似乎有点老套 - 最好找出上下文的原因正在迷路。

在地图组件中：

const nodeContents = (
    <NodeIcon_svg />
    );
const nodeIcon = Leaflet.divIcon({html: ReactDOMServer.renderToString(nodeContents),
    iconSize: [60, 60],
    iconAnchor: [30, 30]
});

Leaflet.marker(latLng, { icon: nodeIcon }).addTo(_mapLayer);

在 NodeIcon 组件的样式中（主题包含具有多种命名颜色的对象）：

export const NodeIcon_svg = styled.svg`
    polygon {
        stroke: ${({ theme }) => theme.colors.blue1)};
        fill: transparent;
    }
`;

如果我将其添加到地图组件中：

import themeColors from '../../theme';

并将此行添加到添加 NodeIcon 的位置：

theme={themeColors}

有用。但这是一种 hack - 它应该能够使用主题。

应该发生什么（当 NodeIcon 组件在其他地方使用时会发生什么）：它找到颜色theme.colors并将其应用于多边形的笔画。

实际发生的情况是，页面因尝试访问的样式中的行出现 js 错误而终止theme.colors.blue1，表示无法读取该对象，因为该对象未定义。不知何故theme，它没有进入组件，可能是因为使用了ReactDOMServer.renderToString. 知道如何在theme不对代码进行大量重组的情况下使标记组件可用吗（因为我们已经有了一个可行但笨拙的解决方案）？