React中使用SCSS Modules设置单页面背景及多页面背景差异化解决方法

你遇到的核心问题是：SCSS Modules的设计初衷是局部作用域，直接在组件的Modules文件里写body样式会生成全局样式，但由于样式优先级或加载顺序问题，后续页面的body样式无法覆盖之前的。而且这种写法违背了Modules的局部作用域原则，容易造成全局样式污染。

下面是几种实用的解决方法：

方法1：用React钩子动态控制body样式（推荐） #

直接在页面组件中通过useEffect钩子动态设置body的内联样式，组件挂载时生效，卸载时恢复默认，完全避免全局样式冲突。

示例代码：

import { useEffect } from 'react';
import styles from './YourPage.module.scss';

const YourPage = () => {
  useEffect(() => {
    // 保存原始body背景样式，用于卸载时恢复
    const originalBg = document.body.style.background;
    
    // 设置当前页面的body背景
    document.body.style.background = `linear-gradient(90deg, #000 0%, #666 45%, #666 55%, #000 100%)`;
    
    // 组件卸载时恢复原始样式
    return () => {
      document.body.style.background = originalBg;
    };
  }, []);

  return <div className={styles.pageContainer}>页面内容</div>;
};

export default YourPage;

如果要用SCSS变量，你可以把变量导出到JS文件中使用，或者直接写编译后的色值。

方法2：全局样式+动态类名 #

在全局SCSS文件中定义不同页面的背景类，然后通过React钩子给body动态添加/移除类名，利用类选择器的优先级控制样式。

步骤1：在全局SCSS（比如global.scss）中定义背景类：

$black: #000;
$gray: #666;

.page-bg-black-gradient {
  background: $black;
  background: linear-gradient(90deg, $black 0%, $gray 45%, $gray 55%, $black 100%);
}

.page-bg-white {
  background: #fff;
}

步骤2：在页面组件中控制类名：

import { useEffect } from 'react';
import styles from './YourPage.module.scss';

const YourPage = () => {
  useEffect(() => {
    document.body.classList.add('page-bg-black-gradient');
    
    // 卸载时移除当前类，避免影响其他页面
    return () => {
      document.body.classList.remove('page-bg-black-gradient');
    };
  }, []);

  return <div className={styles.pageContainer}>页面内容</div>;
};

export default YourPage;

这种方法适合复杂的body样式（比如包含多个属性），维护起来更清晰。

方法3：SCSS Modules中使用全局作用域（不推荐） #

如果一定要在Modules文件中写body样式，可以用:global()包裹body选择器，同时结合组件的局部类名提升样式优先级，确保当前页面的body样式能覆盖其他页面的。

示例代码（YourPage.module.scss）：

$black: #000;
$gray: #666;

.pageRoot {
  /* 组件局部样式 */
}

:global(body).#{&} {
  background: $black;
  background: linear-gradient(90deg, $black 0%, $gray 45%, $gray 55%, $black 100%);
}

这里#{&}会编译成当前组件的局部类名（比如YourPage_pageRoot_xxxx），最终生成的选择器是body.YourPage_pageRoot_xxxx，优先级比单纯的body高，能覆盖其他全局body样式。但这种写法比较hack，容易导致样式混乱，建议优先用前两种方法。

内容的提问来源于stack exchange，提问作者Guilherme Gonçalves