未应用样式化组件样式

Question

我有一个反应弹出窗口，它使用样式组件进行样式设置。我正在 Shadow dom 中渲染 React 应用程序。因为我不想让任何其他 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(
    <React.StrictMode>
      <StyleSheetManager target={styleSlot}>
        <GlobalStyle />
        <App id={id} hostId="#host" />
      </StyleSheetManager>
    </React.StrictMode>
  )
}

// 示例组件

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;

这就是它在普通网站上的样子

//但是在这个网站上它不应用样式

仅在此网站上样式被阻止或未加载的原因可能是什么？ 我该如何调试它？

Answer 1

Check CSS Syntax in Styled Component

import styled from "styled-components";
import Form from "../Form";
import { Back, Search } from '../Icons'; // assuming Back and Search are SVG components

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;