Я не могу поделиться всем кодом, поскольку он находится в частном репозитории, и я не являюсь его владельцем.
Здесь какой-то код
// 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(
)
}
Код: Выделить всё
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 (
{props.help}
);
};
export default Header;


// Но здесь, на этом сайте, стили не применяются

Какая может быть причина(ы), почему только на этом сайте стили блокируются или не загружаются?
И как это можно отладить?
Подробнее здесь: https://stackoverflow.com/questions/787 ... ot-applied