設置 React 基本背景顏色，而顯示主要使用組件

我目前正在嘗試設計一個 React 項目的樣式，其中 App.js 主要提供路由和導航到其組件的功能：

應用程序.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>

如何成功更改基本背景顏色？幫助將不勝感激，感謝閱讀！