在 React 中的 Body 元素上设置样式

作者

在 React 中为 Body 元素设置样式

Set styles on the Body element in React

在 React 中设置 body 元素的样式：

  1. document.body在useEffect事件处理程序中访问主体元素。
  2. 使用该style属性在 body 元素上设置样式。
  3. 例如，document.body.style.backgroundColor = 'lime'。
应用程序.js
import {useEffect} from 'react';

import './App.css';

export default function App() {
  useEffect(() => {
    // 👇 add class to body element
    document.body.classList.add('bg-salmon');

    // 👇️ set style on body element
    document.body.style.backgroundColor = 'salmon';

    return () => {
      // 👇️ optionally remove styles when component unmounts
      document.body.style.backgroundColor = null;

      document.body.classList.remove('bg-salmon');
    };
  }, []);

  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
}

这是css示例的文件。

应用程序.css
.bg-salmon {
  background-color: salmon;
  color: white;
}

我们可以访问对象body上的元素document。

您可以使用
样式
对象读取元素的样式或在元素上设置新样式。

如果需要向 body 元素添加类，请使用
classList.add
方法。

We passed an empty dependencies array to the
useEffect hook
because we only want to set styles on the body element once – when the
component mounts.

If you need to remove the styles when the component unmounts, return a cleanup
function from the useEffect hook.

App.js
useEffect(() => {
  // 👇 add class to body element
  document.body.classList.add('bg-salmon');

  // 👇️ set style on body element
  document.body.style.backgroundColor = 'salmon';

  return () => {
    // 👇️ optionally remove styles when component unmounts
    document.body.style.backgroundColor = null;

    document.body.classList.remove('bg-salmon');
  };
}, []);

To remove a style, you can just set it to null.

You can also set classes to the body element when an event is triggered, e.g. a
button is clicked.

App.js
export default function App() {
  const handleClick = () => {
    document.body.style.backgroundColor = 'salmon';
    document.body.style.color = 'white';
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

We set the onClick prop on the button element, so every time it is clicked,
the handleClick function gets invoked.

If you need to toggle styles on the body element when an event occurs,
conditionally check whether the styles are already present and remove them if
they are, otherwise set the styles.

App.js
export default function App() {
  const handleClick = () => {
    if (document.body.style.backgroundColor) {
      document.body.style.backgroundColor = null;
      document.body.style.color = null;
    } else {
      document.body.style.backgroundColor = 'salmon';
      document.body.style.color = 'white';
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

如果backgroundColor样式已经在 body 元素上设置，我们通过将其设置为 将其删除null，否则我们将其设置为salmon。

–