Стили стилизованных компонентов не применяются.CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Стили стилизованных компонентов не применяются.

Сообщение Anonymous »

У меня есть всплывающее окно, в котором для стилизации используется styled-компонент. Я визуализирую приложение реагирования в теневом доме. Потому что я не хотел, чтобы какой-либо другой файл CSS изменял всплывающее окно. Он работает на большинстве сайтов, за исключением этого. Здесь он отображает HTML, но не стили. Есть ли причина, почему это происходит?
Я не могу поделиться всем кодом, поскольку он находится в частном репозитории, и я не являюсь его владельцем.
Здесь какой-то код
// 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
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»