如何在Reactjs应用中修改背景色且不影响其他页面

方案1：利用组件生命周期切换body类名 #

因为body是全局DOM元素，直接在全局CSS里定义深色背景类，然后在着陆页组件挂载时给body添加这个类，卸载时移除，就能只让着陆页生效：

1. 先在全局CSS文件（比如index.css）里写：

.dark-bg {
  background-color: #1a1a1a; /* 根据需求调整深色值 */
}

2. 在着陆页组件（比如LandingPage.jsx）里用useEffect处理：

import { useEffect } from 'react';

function LandingPage() {
  useEffect(() => {
    // 组件挂载时给body加类
    document.body.classList.add('dark-bg');
    
    // 组件卸载时移除类
    return () => {
      document.body.classList.remove('dark-bg');
    };
  }, []);

  return (
    <div className="landing-content">
      {/* 你的浅色文本框等着陆页内容 */}
    </div>
  );
}

export default LandingPage;

切换到其他页面时，body的深色类会被自动移除，不会影响其他页面样式。

方案2：给着陆页组件设置独立全屏背景 #

不用修改全局body，直接给着陆页的根容器设置全屏背景，完全隔离其他页面：

如果用模块化CSS（LandingPage.module.css）：

.landing-container {
  min-height: 100vh;
  width: 100%;
  background-color: #1a1a1a;
}

组件中应用样式：

import styles from './LandingPage.module.css';

function LandingPage() {
  return (
    <div className={styles.landingContainer}>
      {/* 浅色文本框及其他内容 */}
      <div className="light-text-box">欢迎界面内容</div>
    </div>
  );
}

export default LandingPage;

这种方法更符合React组件化思路，不会污染全局元素，适合新手优先使用。

为什么你之前的模块化CSS没生效？ #

模块化CSS默认会给类名添加哈希前缀（比如landingContainer_abc123），而body是全局元素，你直接在模块化CSS里写body.dark-bg的话，生成的类名会带前缀，和手动给body添加的类名不匹配，所以样式无法生效。这也是操作body类名时需要配合全局CSS的原因。

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