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

Question

如果 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")};
  }

Answer 1

我不熟悉 react 样式的组件，但我怀疑嵌套 body 的语法标签是正确的。
您可以使用 useEffect卡在您的导航栏组件中:

useEffect(() => {
  document.body.style.position = open ? 'fixed' : 'absolute';
}, [open]);

这将首先调用箭头函数，每当 open Prop 变化。