Styled-components dynamic CSS 未在新的 window 中生成

Question

我正在使用 react-new-window to open a popup. The popup includes a few dynamic components (a toggle, a dropdown, etc) styled with styled-components。

一切都正常显示，直到我尝试与其中一个动态组件交互并且它改变了状态（比如我将开关从关闭切换到打开）。然后事实证明，通常生成并附加到 <head> 的新组件状态的 CSS class 实际上附加到父 <head> window, 不是弹窗。所以我的组件似乎失去了样式。

我在父 window 中也有相同的组件。因此，如果我在打开弹出窗口之前与它们进行交互，样式会像往常一样附加到 <head>，然后被复制到弹出窗口，一切看起来都不错。

所以我看到了两种可能的解决方法：

我可以告诉 styled-component 以某种方式与新的 window 对话，而不是父组件。
作为解决方法，我可以以某种方式以编程方式预先生成所有样式（样式不多）。

问题是我不确定如何做这两件事。欢迎任何想法！

Answer 1

选项 1 的解决方案实际上可以通过 styled-component API:

import React from 'react';
import styled, {StyleSheetManager} from 'styled-components';
import NewWindow from 'react-new-window';

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPopout: false,
    };
    this.nwRef = React.createRef();
  }

  render () {
    ... some stuff
    this.state.showPopout && (
    <StyleSheetManager target={this.nwRef.current}>
      <NewWindow
        title="Title"
        features={{width: '960px', height: '600px'}}
        onUnload={() => this.setState({showPopout: false})}
      >
        <div ref={this.nwRef}>
          <Popout isPopout={true}>
            ... popup stuff
          </Popout>
        </div>
      </NewWindow>
    </StyleSheetManager>
  )}
}

Answer 2

如果有人需要，这里有一个功能组件的工作示例

const Parent = () => {
  const [showPopout, setShowPopout] = useState(false)
  const [newWindowNode, setNewWindowNode] = useState(null)

  const nwRef = useCallback(node => setNewWindowNode(node), [])

  return showPopout 
    ? (
      <StyleSheetManager target={newWindowNode}>
        <NewWindow
          title="Title"
          features={{width: '960px', height: '600px'}}
          onUnload={() => setShowPopout(false)}
        >
          <div ref={nwRef}>
            <Popout isPopout={true}>
              ... popup stuff
            </Popout>
          </div>
        </NewWindow>
      </StyleSheetManager>
    ) : null
}

Styled-components dynamic CSS 未在新的 window 中生成

Styled-components dynamic CSS is not generated in a new window

javascript

css

new-window

reactjs

styled-components