I have been working on styling a React project where App.js mainly handles routing and navigation to its components:
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 functions declarations.....
return (
<Browserouter>
<Switch>
<Route path="/" exact>
{isLoading===true?
<Loadingpage/>
:
<Models/>
</Route>
<Route path="/models/output" exact>
<Output/>
</Route>
</Switch>
</Browserouter>
);
}
The process goes as follows:
- If the app.js is in a loading mode, we show the loading page component. Here's the complete content of the loading page:
<div className="Loading page"
style={{
display: 'flex',
alignItems: 'center',
background: "#A0C5E8",
justifyContent: 'center',
}}
>
<FlowerSpinner size={props.size} color={props.color}/>
</div>
- Once the loading time is up, we display the model page (which simply contains buttons)
- Upon button click, the output page gets rendered.
All the components function correctly, and they all behave similarly to the loading page. They render over the top but only take up their designated space, giving the impression that the underlying background needs adjustment somewhere. That brings us to:
https://i.sstatic.net/I609s.png https://i.sstatic.net/w28rd.png https://i.sstatic.net/fGCRG.png
The screenshots show how each page has its own div with its respective background displayed. I've attempted wrapping each component in a div with the relevant background color and enclosing the entire app.js within a div too: e.g.
<div
style={{
display: 'flex',
alignItems: 'center',
background: "#A0C5E8",
justifyContent: 'center',
}}
>
<Loadingpage size={300} color="black"/>
</div>
How can I effectively change the base background color? Any assistance would be greatly appreciated. Thank you for your time!