在显示主要使用组件时设置 React 基本背景颜色

Question

我目前正在尝试设计一个 React 项目，其中 App.js 主要提供路由和导航到其组件的功能：

App.js


import {useState, useEffect} from 'react';
import Models from './pages/Models';
import Loadingpage from './pages/Loadingpage';
import Output from './pages/Output';
import './App.css';
import {BrowserRouter, Route, Switch} from "react-router-dom";


function App() {
 // state variables and function declarations.....
 
 return (
 <Browserouter>
  <Switch>
   <Route path="/" exact>
   {isLoading===true?
    <Loadingpage/>
    :
    <Models/>
   </Route>
   <Route path="/models/output" exact>
    <Output/>
   </Route>
  </Switch>
 </Browserouter>
 );
}

流程如下：

如果app.js处于加载状态，我们渲染加载页面组件。这是加载页面的整个主体：

        <div  className="Loading page"    
            style={{
                display: 'flex',
                alignItems: 'center',
                background: "#A0C5E8",
                justifyContent: 'center',
            }}
        >
            <FlowerSpinner size={props.size} color={props.color}/>
        </div>

加载时间结束后，我们呈现模型页面（仅由按钮组成）
单击按钮时，将呈现输出页面。

这些组件完全可以正常工作，并且它们的工作方式与加载页面的工作方式相同。它们只是作为一个组件呈现在顶部（或者看起来如此）。但是，组件页面只渲染它们占用的 space 部分，这使得底层背景似乎需要在某处更改。这是发生了什么：

如图所示，页面有自己的 div，其中显示了各自的背景。 我已经尝试将每个组件包装在具有相应背景颜色的 div 中，并将整个 app.js 包装在 div 中： 例如

                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    background: "#A0C5E8",
                    justifyContent: 'center',
                  }}
                >
                  <Loadingpage size={300} color="black"/>
                </div>

如何成功更改基本背景颜色？不胜感激，感谢阅读！

Answer 1

要更改整个页面的背景颜色，您需要将样式应用于 html 的 body 标记并在 index.js 或 App.js 文件中导入样式：

styles.css

body {
  background : #A0C5E8
}

index.js 或 App.js

import './styles.css'

Answer 2

如果其他页面的背景颜色不同，考虑在页面更改路由后使用反应钩子从正文中添加和删除类。

styles.css

.loading-page {
    background : #A0C5E8
}

import React, { useEffect } from "react";
import './styles.css';
function App() {
 // state variables and function declarations.....
  useEffect(() => {
    document.body.classList.add('loading-page');
    return function cleanup() {
      document.body.classList.remove('landing');
    };
  });
   ...
}

在显示主要使用组件时设置 React 基本背景颜色

Set React base background color while display mostly uses components

html

javascript

css

frontend

reactjs