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

Question

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

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

Answer 1

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

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>
  );
}

Answer 2

我想你也可以用这个

    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>
      );
    }

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

How do I change the whole page background color with each route using React?

css

themes

reactjs