如何使用 React 更改每条路由的整个页面背景颜色？答案

【问题标题】：How do I change the whole page background color with each route using React?如何使用 React 更改每条路由的整个页面背景颜色？
【发布时间】：2022-02-06 10:24:59
【问题描述】：

我正在构建一个反应应用程序，我希望每条路线都有不同的背景颜色。但是改变整个页面背景颜色的唯一方法是使用 * {} 标签。是否有某种主题库或任何我可以做的事情来将变量从我的路由传递到 * {} 标记以更改其背景颜色？

其他解决方案包括在我的根组件上设置最小高度，但这感觉不对，我不会这样做。

【问题讨论】：

标签： css reactjs themes

【解决方案1】：

我觉得你也可以用这个

    function App() {
    
      const [color, changeColor] = useState("#282c34");

      document.body.style.backgroundColor = color;
      
      return (
        <div>
          <Router>
            <div>
              <nav>
                <ul>
                  <li>
                    <Link to="/" onClick={() => changeColor("#282c34")}>
                      Home
                    </Link>
                  </li>
                  <li>
                    <Link to="/about/" onClick={() => changeColor("#9c27b0")}>
                      About
                    </Link>
                  </li>
                  <li>
                    <Link to="/users/" onClick={() => changeColor("#007bff")}>
                      Users
                    </Link>
                  </li>
                </ul>
              </nav>
              <Route path="/" exact component={Index} />
              <Route path="/about/" component={About} />
              <Route path="/users/" component={Users} />
            </div>
          </Router>
        </div>
      );
    }

【讨论】：

啊，是的，我可以在任何组件中使用document.body.style.backgroundColor，谢谢！

【解决方案2】：

您可以使用状态颜色并将其传递给每个路由。这是一个例子来说明我告诉你的：

function App() {

  const [color, changeColor] = useState("#282c34");
  return (
    <div style={{ background: color }} id="main">
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/" onClick={() => changeColor("#282c34")}>
                  Home
                </Link>
              </li>
              <li>
                <Link to="/about/" onClick={() => changeColor("#9c27b0")}>
                  About
                </Link>
              </li>
              <li>
                <Link to="/users/" onClick={() => changeColor("#007bff")}>
                  Users
                </Link>
              </li>
            </ul>
          </nav>
          <Route path="/" exact component={Index} />
          <Route path="/about/" component={About} />
          <Route path="/users/" component={Users} />
        </div>
      </Router>
    </div>
  );
}

【讨论】：

是的，但这只会改变 div 的背景颜色，而不是整个页面。所以如果我的页面内容不多，背景颜色不会覆盖全屏