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

【问题标题】：How to apply CSS to body element if prop is present?如果存在 prop，如何将 CSS 应用于 body 元素？
【发布时间】：2020-12-08 18:37:29
【问题描述】：

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

【问题讨论】：

这样写，样式会被应用到作为nav子标签的body标签上，但事实并非如此。
stackoverflow.com/questions/1014861/…
只在组件中，使用DOM API
我能想到的一种方法是传入 props 以维护 globalStyles 组件中的状态，该组件使用样式化组件中的createGlobalStyle API，并根据传递给 nav 的 prop 更新状态，这将更新身体标签的位置。另一种方法是使用 DOM API 直接更新位置，但这是最后的手段。

标签： javascript css reactjs styled-components

【解决方案1】：

我不熟悉 react 样式的组件，但我怀疑嵌套 body 标记的语法是否正确。
不过，您可以在 Navbar 组件中使用 useEffect 挂钩：

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

这将在最初以及每当 open 属性更改时调用箭头函数。

【讨论】：

你不应该用 React 查询文档对象，你有 API 来做这件事，尤其是你有 createGlobalStyle 的 styled-component

【解决方案2】：

正确的方法是使用库 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>
    </>
  );
}

【讨论】：