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

jyztefdp 于 2023-06-25 发布在 React

关注(0)|答案(2)|浏览(274)

我正在制作一个多页面的网站，并试图为不同的页面添加不同的CSS。
我使用react-router-dom来处理路由，我的文件设置如下：

Main.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';

// Other imports for pages here

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

export default Main;

App.js

import './App.css';
import Main from './Main';

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

导出默认App;

index.js

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

css

来源：https://stackoverflow.com/questions/76544282/how-can-i-add-custom-body-css-for-different-pages-in-reactjs

2条答案

按热度按时间

8oomwypt1#

您可以直接在组件内部的<body>元素上为每个路由设置内联样式。
例如：

function MyPage() {
    document.body.style.fontSize = '14px';
    // return some JSX...
}

要在卸载组件时重置样式，可以应用useEffect。

import { useEffect } from 'react';
function MyPage() {
    useEffect(() => {
        const origFontStyle = document.body.style.fontSize;
        document.body.style.fontSize = '14px';
        return () => document.body.style.fontSize = origFontStyle;
    }, []);
    // return some JSX...
}

您可以考虑将其提取到一个自定义钩子中，以便更方便地使用。

赞(0）回复(0）举报 2023-06-25

fquxozlt2#

所以我想出了一个解决方案，虽然不确定这是否是一个好的实践，但它确实有效。
我在返回之前，在每个页面组件的开头设置body类。
例如：

const MyPage = () => {
  // Set the css class
  document.body.setAttribute('class', 'my-class'):

  return (
    // Component code
  );
}

唯一的问题是，我必须在每个页面组件上设置这个，以确保一个组件的主体CSS不会进入另一个组件。

赞(0）回复(0）举报 2023-06-25

我来回答

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

2条答案

相关问题

热门标签

最新问答