Establish a primary background color for the React application, with the majority of the display content

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!

Answer №1

If you want to update the background color of the entire page, you will need to add a style rule to the body tag in your HTML and then import the necessary styles in either the index.js or App.js file:

styles.css

body {
  background-color: #A0C5E8;
}

index.js or App.js

import './styles.css';

Answer №2

In the case that the background color differs on various pages, one solution is to utilize a react hook for dynamically adding and removing classes from the body element when transitioning between routes.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React failed to render the information fetched from an API following a GET request made in componentDidMount()

I recently implemented a function in my React code that calls an API and updates the state based on the data it receives. getUserList() { API.get('/userlist') .then(response => { this.setState({ userLis ...

Preventing Vimeo from continuing to play when the modal is closed by clicking outside of it

I am facing an issue with my Vimeo video embedded in a modal. The video stops playing when I click on the 'close' button, but it continues to play in the background when I click off the modal. I have tried solutions from similar questions without ...

Update the contents of a neighbor div within the same parent element using jQuery

Attempting to set the range slider value within the slider parent sibling var updateRangeSlider = function() { var slider = $('.range-slider'), range = $('.range- value = $('.range-slider__value'); sli ...

In production mode, the getStaticProps function in Next.js is failing to return the expected props

I'm currently facing an issue with Next.js's getStaticProps method while trying to retrieve data from an API and display it. It works perfectly fine when I test my app locally, but once deployed on AWS Amplify for production, the data doesn' ...

Please refer to the appropriate manual for your MySQL server version to find the correct syntax for the following statement: `'' , , '', '', '', '', '', '', NOW())' at line 2`

I encountered an error and since I am new to programming, I would appreciate any corrections. Thank you! <? $customername = $_REQUEST["customername"]; //$customername = strtoupper($customername); //$customername = trim($customername); $address1=$_RE ...

The options in the drop-down menu appear to be stuck and remain in place

Can someone with expertise lend me a hand? I've been racking my brain over this issue, and while I feel like I'm on the right track, I just can't seem to make my sub-sub menu items drop down to the right on hover. I suspect there might be c ...

Trouble with retrieving dates in ISO format

My collection stores the date of birth field in ISO format, for example: ISODate("1980-01-01T20:20:19.198Z") However, when I use a date time picker on my HTML page, it displays the date like this: 01/01/1980 Unfortunately, when querying for the date of ...

Newbie facing challenges with data fetching in Next.js 13 getStaticProps

Recently, I started diving into Next.js and exploring the world of React while incorporating Tailwind CSS into a project. Utilizing getStaticProps to fetch data from a JSON file and present various sections on different pages through dynamic routes has bee ...

Unable to retrieve table information from HTML source code using Python and Selenium

In my endeavor to gather the odds data from this particular source, I am specifically focused on the "Over Under" segment and the over/under odds provided by Pinnacle and AsianOdds, which are accessible through the "compare" button. Here is an image descr ...

Navigating through the material ui swipeable drawer is a mystery to me

Utilizing the Material UI swipeable drawer, it showcases a loading message while awaiting data from the server. https://i.stack.imgur.com/5eQ86.png Once the data is fetched, the drawer should open to the center of the page with the data displayed. https ...

Creating a dynamic directive in AngularJS: Learn how to add or remove it from the DOM based on specific conditions

Suppose I have a customized modal directive that looks like this: return { restrict: 'E', templateUrl: 'modal.html', scope: { modalContent: "&", modalOpen: "&" } } And in the HTML: <ng-modal modal-content="co ...

Editing rows directly within the ng table interface

Hey there, I'm currently working on implementing inline row editing using ng table After clicking the edit icon and changing values, I encounter an error upon clicking the save icon: TypeError: Cannot read property 'untrack' of undefined ...

What are the best methods for rebooting a Node.js project?

As a developer with over 8 years of experience in PHP, I find myself needing to make changes to a live Node.js project, despite not being a Node.js developer myself. The task at hand is simply to change a payment gateway token, which should be a straightfo ...

Eliminate any blank spaces in the SELECT Angular application for IE-CSS

One issue I encountered is removing the default selected "SELECT" option from a select drop down on my webpage. Currently, I am using to remove it successfully in Chrome and Firefox browsers, but unfortunately IE does not respond to this method. I ha ...

casperjs is encountering difficulty locating the id even after setting it

Issue with CasperJS not locating the ID after setting it Casper.then(function () { screenLog(); var id = String("_newid_"); var arrow = this.evaluate(function () { var arrows = document.querySelectorAll('span.select2-selection__a ...

Determine the total number of arrays present in the JSON data

I'm currently working on a straightforward AngularJS project, and here's the code I have so far: This is my view: <tr ng-repeat="metering in meterings"> <td>1</td> <td>{{metering.d.SerialNumber}}</td> ...

React - Updating state from an external component

I realize that the question I am about to ask may go against some basic principles of using React... however, with this example, I hope someone can assist me in finding a solution to the problem I am currently facing. While this code snippet is not from m ...

Display open time slots in increments of 15 minutes on Fullcalendar

Currently, I am utilizing the fullcalendar plugin with the 'agendaweek' view. My goal is to showcase the available time slots as clickable and highlight the busy ones with a red background. Handling the highlighting of busy slots is not an issue ...

Steps for placing an image within the boundary of a rectangular div

My div has a width of approximately 730px and a height of 50px. I am looking to place an image at the bottom of the div, exactly where its height ends - after 50px. I have been considering a query to append the image at the bottom. One solution could be ...

I am encountering an issue where I am unable to access properties of null while trying to read the 'pulsate' function within the

The current version of my material-ui library is as follows: "@mui/icons-material": "^5.5.1", "@mui/material": "^5.5.1", This is how I included the Button component : import Button from "@mui/material/Button&qu ...