问新浏览器选项卡不加载样式组件

EN

import { useState, useRef, useEffect } from 'react'
import { createPortal } from 'react-dom'

export const NewBrowserTab = ({ children }) => {
  const [container, setContainer] = useState(null)
  const newWindow = useRef(null)

  useEffect(() => {
    setContainer(document.createElement('div'))
  }, [])

  useEffect(() => {
    if (container) {
      newWindow.current = window.open('', '')
      newWindow.current.document.body.appendChild(container)

      return () => {
        newWindow.current.close()
      }
    }
  }, [container])

  return container && createPortal(children, container)
}

import React, { useState } from 'react'
import { NewBrowserTab } from '@components/NewBrowserTab/NewBrowserTab'
import styled from 'styled-components'

const DownloadButton = () => {

  const [isActive, setIsActive] = useState(false)

  return (
    <>
      <button onClick={() => setIsActive(true)}>open window</button>
      {isActive &&
        <NewBrowserTab>
          <MyStyledComponent>this is supposed to be red in new window!</MyStyledComponent>
        </NewBrowserTab>}
    </>
  )
}

const MyStyledComponent = styled.div`
  color: red;
  background-color: blue;
`

export default DownloadButton