如何在ReactJS中为不同页面添加自定义body CSS？

下面提供两种实用方案，帮你给不同路由页面的body元素设置不同样式：

方案1：在页面组件内单独处理（适合页面较少的场景） #

每个页面组件挂载时给body添加专属类名，卸载时移除，避免样式残留。

比如MyPage.js：

import React, { useEffect } from 'react';

const MyPage = () => {
  useEffect(() => {
    // 给body添加当前页面专属类名
    document.body.classList.add('my-page-body');
    
    // 组件卸载时移除类名
    return () => {
      document.body.classList.remove('my-page-body');
    };
  }, []);

  return (
    <div>这是我的主页内容</div>
  );
};

export default MyPage;

AnotherPage.js同理：

import React, { useEffect } from 'react';

const AnotherPage = () => {
  useEffect(() => {
    document.body.classList.add('another-page-body');
    
    return () => {
      document.body.classList.remove('another-page-body');
    };
  }, []);

  return (
    <div>这是另一个页面的内容</div>
  );
};

export default AnotherPage;

然后在全局CSS文件（比如index.css）中定义对应样式：

/* 默认body样式 */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主页对应的body样式 */
body.my-page-body {
  background-color: #f5f5f5;
  font-family: 'Arial', sans-serif;
}

/* 另一个页面对应的body样式 */
body.another-page-body {
  background-color: #e8f4fd;
  font-family: 'Segoe UI', sans-serif;
}

方案2：全局监听路由变化（适合页面较多的场景） #

在App组件中监听路由切换，统一给body设置类名，避免重复代码。

先修正你的Main.js路由冲突问题（两个路由路径都是/，会导致只有第一个生效）：

// 修正后的Main.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import MyPage from './MyPage';
import AnotherPage from './AnotherPage';

const Main = () => {
  return (
    <Routes>
      <Route path="/" element={<MyPage />}></Route>
      <Route path="/another" element={<AnotherPage />}></Route>
    </Routes>
  );
}

export default Main;

然后修改App.js，添加路由监听：

import './App.css';
import Main from './Main';
import { useLocation, useEffect } from 'react-router-dom';

const App = () => {
  const location = useLocation();

  useEffect(() => {
    // 先清除所有页面专属的body类名
    document.body.classList.remove('my-page-body', 'another-page-body');
    
    // 根据当前路由路径添加对应类名
    switch(location.pathname) {
      case '/':
        document.body.classList.add('my-page-body');
        break;
      case '/another':
        document.body.classList.add('another-page-body');
        break;
      // 其他路由可以继续添加case
      default:
        break;
    }
  }, [location.pathname]);

  return (
    <div className="App">
      <Main />
    </div>
  );
}

export default App;

关键提示 #

• 无论用哪种方案，都要确保移除不再需要的类名，防止样式污染其他页面
• 路由路径必须唯一，否则会出现组件匹配错误的问题

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