CSS broken when rendering redux-devtools-inspector to a popup window

[tarruda]

I'm trying to integrate redux-devtools-inspector with my Electron app as a separate popup window, the problem is that the styles are appended to the main window and not the popup created to host the devtools. I'm using a code snippet similar to this one: https://gist.github.com/zalmoxisus/de456d1192f31bf381c0

It seems JSS will append the style sheet in the main window (the context where I call ReactDOM.render from). Is there a way to customize this behavior or make the component to insert the styles inline?

[garycourt]

I ran into this same issue. This is because redux-devtools is using JSS for styling, which always attaches it's CSS to the global window object (and not the popups window object)

The workaround that worked for me was to copy the CSS generated by the component (after it was rendered) into the DOM of the popup.

      const popup = window.open(
        undefined,
        'Redux DevTools',
        'menubar=no,location=no,resizable=yes,scrollbars=no,status=no',
      );

      if (popup) {
        popup.document.write('<div id="react-devtools-root"></div>');

        // Setup independent React renderer for DevTools component in window's DOM.
        render(
          <DevTools store={store as ConstructorParameters<typeof DevTools>[0]['store']} />,
          popup.document.getElementById('react-devtools-root'),
          () => {
            // Hack: We copy the generated CSS from our window into the popup after the component is mounted.
            const jssStyles = window.document.querySelector('style[data-jss]')?.innerHTML ?? '';
            popup.document.write(`<style data-jss>${jssStyles}</style>`);
          },
        );
      }