Javascript 如果存在prop，如何将CSS应用于body元素？

如果open prop值为true，我想对body元素应用一个位置固定，那么如何使用样式化组件实现这一点

export const Navbar = styled.nav`
  box-sizing: border-box;
  overflow-y: scroll;
  justify-content: center;
  background: ${() => "#ffffff"};
  height: 100vh;
  text-align: left;
  padding: 5rem 4rem 2rem;
  top: 0;
  left: 0;
  transition: transform 0.3s ease-in-out;

  transform: ${({ open }) => (open ? "translateX(0)" : "translateX(-110%)")};
 

  body {
    position: ${({ open }) => (open ? "fixed" : "absolute")};
  }

---

我不熟悉react样式的组件，但我怀疑嵌套的

body

标记的语法是否正确。
您可以在导航栏组件中使用

useffect

挂钩，不过：

useffect（（）=>{
document.body.style.position=打开？'fixed'：'absolute'；
}，[开放]；

---

这将在开始时调用arrow函数，并在

open

属性更改时调用。

正确的方法是使用库API，因为查询文档对象/DOM是React中的反模式（这就是为什么首先使用React）

请参见主体样式示例：

const GlobalStyle = createGlobalStyle`
body {
  color: ${({ open }) => (open ? "red" : "blue")}
}
`;

export default function App() {
  const [open, toggle] = useReducer((p) => !p, false);
  return (
    <>
      Body Style Example
      <GlobalStyle open={open} />
      <button onClick={toggle}>toggle</button>
    </>
  );
}

const GlobalStyle=createGlobalStyle`
身体{
颜色：${（{open}）=>（open？“红色”：“蓝色”）}
}
`;
导出默认函数App（）{
const[open，toggle]=useReducer（（p）=>！p，false）；
返回(
车身样式示例
切换
);
}

---

按照这种编写方式，样式将应用于body tag，body tag是nav的子项，但事实并非如此。仅在组件中，使用DOM API我能想到的一种方法是传入道具以维护globalStyles组件中的状态，该组件使用样式化组件中的

createGlobalStyle

API，并根据道具传递到nav更新状态，nav将更新body标记的位置。另一种方法是使用DOM API直接更新位置，但这是最后的手段。您不应该使用React查询文档对象，您有用于此的API，特别是使用样式化组件，其中有

createGlobalStyle