Css – Styled Components styles are not applied

I’ve a react popup which uses styled-component for styling. I’m rendering the react app in shadow dom. Because I didn’t want any other css file to modify the popup. It is working on most sites except for this one website, Here it does render the html but not the styles. Any reason why this is happening?

I cannot share the whole code as it’s in a private repo and I don’t own it.

Here are some code
// src/main.jsx

import { StyleSheetManager } from "styled-components";
import { createGlobalStyle } from 'styled-components'
import App from './App.jsx'

const GlobalStyle = createGlobalStyle`
  #app-root {
    font-size: 10px;
    color: black;
  }


  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1;
  }

`

const Popup = (id) => {
  const host = document.createElement("div");
  host.setAttribute("id", "host");
  document.body.appendChild(host);


  const shadow = host.attachShadow({ mode: "closed" });
  const styleSlot = document.createElement("div");
  const renderIn = document.createElement("div");
  renderIn.setAttribute("id", "app-root")

  shadow.appendChild(styleSlot);
  shadow.appendChild(renderIn);


  ReactDOM.createRoot(renderIn).render(
    <React.StrictMode>
      <StyleSheetManager target={styleSlot}>
        <GlobalStyle />
        <App id={id} hostId="#host" />
      </StyleSheetManager>
    </React.StrictMode>
  )
}

// example component

import styled from "styled-components";
import Form from "../Form";
// ...other imports

const HeaderS = styled.header`
  background: var(--color);
  color: white;
  padding: 12px;

  & .flex {
    display: flex;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 20px;
    position: relative;
  }

  & .arrow-con {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
  }

  & h2 {
    font-size: 1.8em;
    text-align: center;
    font-weight: bold;
    text-align: center;
    flex-grow: 1;
  }
  & svg:hover {
    cursor: pointer;
    scale: 1.1;
  }
`;

const Header = (props) => {
  return (
    <HeaderS>
      <div className="flex">
        <span className="arrow-con"><Back color="white" onClick={props.onClick} /></span>
        <h2>{props.help}</h2>
      </div>
      <Form
        placeholder={props.placeholder}
        onSubmit={props.onSubmit}
        Icon={<Search />}
        style={{
          bg: "#fff",
          pd: "12px",
          p_color: "#737373",
          f_weight: "normal",
        }}
      />
    </HeaderS>
  );
};

export default Header;

This is how it looks on normal sites

// But here on this site it doesn’t apply the styles

What could be the reason(s) why only on this site styles are blocked or not loaded?
And how can I debug it?