React Router页面全局显示Styles.css背景图，如何单独配置各页面背景？

你直接给全局body设置背景样式，而React Router是单页应用，所有页面共享同一个body元素，所以所有页面都会显示这个背景图。以下是几种可行的解决方法：

方法1：通过CSS父选择器精准控制 #

给目标页面的根容器加专属类，利用:has()选择器仅在该页面存在时修改body背景：

1. 给目标页面组件的外层容器加唯一类名：

// 比如你的LaptopPage.jsx
import './LaptopPage.css';

function LaptopPage() {
  return (
    <div className="laptop-page">
      {/* 页面内容 */}
    </div>
  );
}

export default LaptopPage;

2. 在全局styles.css中设置默认背景+目标页面背景：

/* 所有页面的默认背景 */
body {
  height: 100vh;
  background-image: url("../../assets/images/default-bg.jpg"); 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
}

/* 仅当目标页面容器存在时，覆盖body背景 */
body:has(.laptop-page) {
  background-image: url("../../assets/images/Brandnewlaptop.jpg");
}

注意：:has()选择器支持现代浏览器，若需兼容旧版浏览器，建议用下面的JS方案。

方法2：用React钩子动态切换 #

在目标页面组件中，通过useEffect在组件挂载时设置背景，卸载时恢复默认：

import { useEffect } from 'react';

function LaptopPage() {
  useEffect(() => {
    // 保存原body背景样式
    const originalBg = document.body.style.backgroundImage;
    // 设置目标背景
    document.body.style.cssText = `
      height: 100vh;
      background-image: url("../../assets/images/Brandnewlaptop.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    `;

    // 组件卸载时恢复原背景
    return () => {
      document.body.style.backgroundImage = originalBg;
      // 也可以直接重置所有背景相关样式：document.body.style.background = '';
    };
  }, []);

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

export default LaptopPage;

同时在全局styles.css中设置所有页面的默认背景即可。

方法3：用样式隔离方案（推荐） #

使用CSS模块或styled-components这类工具，给每个页面的根容器设置全屏背景，代替修改全局body：
比如用CSS模块：

// LaptopPage.jsx
import styles from './LaptopPage.module.css';

function LaptopPage() {
  return (
    <div className={styles.pageWrapper}>
      {/* 页面内容 */}
    </div>
  );
}

export default LaptopPage;

/* LaptopPage.module.css */
.pageWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/images/Brandnewlaptop.jpg"); 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* 让背景在内容下方 */
}

这种方式完全隔离各页面样式，不会出现全局污染问题，适合复杂项目。

内容的提问来源于stack exchange，提问作者Dael