如何改变不同页面的背景颜色

Question

我有两页reactjs

pageOne.js：

import React from "react";
import { Link } from "react-router-dom";
import "./pageOne.css";
const PageOne = () => {
  return (
    <div>
      one
      <br />
      <Link to="/pageTwo">Two Page</Link>
    </div>
  );
};
export default PageOne;

pageTwo.js：

import React from "react";
import { Link } from "react-router-dom";
import "./pageTwo.css";
const PageTwo = () => {
  return (
    <div>
      two
      <br />
      <Link to="/">One Page</Link>
    </div>
  );
};
export default PageTwo;

我定义了两个 css 文件，用于在页面加载时更改背景颜色。

pageOne.css

body {
  background-color: whitesmoke !important;
}

第二页.css

body {
  background-color: crimson !important;
}

这是问题。pageOne背景颜色是crimson，pageTwo背景颜色是crimson。
样本

Answer 1

body正如我之前所说， DOM 树中默认只有一个标签。因此，当您尝试对其进行样式设置时，最后出现的任何内容都会覆盖前面的样式，在您的情况下，第二页样式将覆盖第一页样式。

为了解决这个问题，你有多种选择，但我会选择最简单的一种。您可以为每个页面创建一个容器，然后为该容器分配一种颜色，以使整个页面背景成为您想要的（您可以简单地创建一个布局组件，然后将每个组件包装在其中，并使用类似的方法使其可重用） ）。因此，例如，您可以像这样创建第一个页面：

<div className="crimson">
   two
   <br />
   <Link to="/">one Page</Link>
</div>

并像这样设计它：

.crimson {
  background-color: crimson;
  min-height: 100vh; /* minimum height of page would be equal to available view-port height */
}

这对于您的其他页面也是如此。但您需要考虑必须删除其body本身的默认边距以防止出现任何混乱。

工作演示：