设置 React 基本背景颜色，而 display 主要使用组件答案

【问题标题】：Set React base background color while display mostly uses components设置 React 基本背景颜色，而 display 主要使用组件
【发布时间】：2021-12-31 05:41:11
【问题描述】：

我目前正在尝试设计一个 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>

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

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

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

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

如何成功更改基础背景颜色？非常感谢您的帮助，感谢您的阅读！

【问题讨论】：

标签： javascript html css reactjs frontend

【解决方案1】：

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

styles.css

body {
  background : #A0C5E8
}

index.js 或 App.js

import './styles.css'

【讨论】：

谢谢！这行得通。我意识到我正在编辑错误的 css 文件！

【解决方案2】：

如果其他页面的背景颜色不同，请考虑在页面更改路由后使用react hook在body中添加和删除类。

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');
    };
  });
   ...
}

【讨论】：