New browser tab doesn't load styled components

Question

I have a React application where I'm opening a new browser tab on click. The problem is that my styled component's style won't load in this new browser tab.

Why is my styled component's style not loading in the new browser tab?

This is my browser tab component:

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)
}

And this is where I use that component:

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

And here you can see the styling is not there in devtools (no red or blue color):

Answer 1

@Quentin, thank you for your help. I'll post this answer to answer my question in detail with code as well (if anyone will ever stumble upon this issue in the future):

The styled component won't load in the new tab when I use direct DOM manipulation in the "NewBrowserTab"-component.

So what I did instead was adding a new route with this page component:

import React, { FC } from 'react'
import Flex from '@components/containers/Flex'
import styled from 'styled-components'

export const DocumentPage: FC = () => {

  return (
    <Flex direction='column'>
      <MyStyledComponent>123</MyStyledComponent>
    </Flex>
  )
}

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

export default DocumentPage

and opening it in a new tab with the React Router:

import React from 'react'
import { Link } from 'react-router-dom'

const DownloadButton = () => {

  return (
    <>
      <Link to="dokument" target="_blank" rel="noopener noreferrer">
        new tab with styled component
      </Link>
    </>
  )
}

export default DownloadButton

This means I can get rid of the NewBrowserTab-component AND wherever I navigate in my app, the window will still be open since it no longer is a component that can unmount!