Javascript: change color of the entire page-CodePudding

I'm developing a website for a personal project and I have a problem with the background color setting.

Whatever I do to change the color only changes the color of the container inside my page. I tried to add a class to my div in App.js or to add background color in the css body property of my App.css but nothing works. I did the same in the public folder in index.html by adding in the body <body style="background-color: red"> but still the same problem.

I put a part of my frontend code here and screenshot of my issue after, hoping you can help me.

App.js

import React, { Component, useState, useEffect } from 'react';
import { Switch, Route, withRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';

function App() {

  useEffect(() => {
    const user = AuthService.getCurrentUser();
    ...
  });

  return (
    <div className='global'> //try to implement a css class with a new background color set
      <div>
        <NavBar />
      </div>
      <div className="container mt-3">
        <Switch>
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />
          <Route path="/dashboard" component={Dashboard} />
          ....
        </Switch>
      </div>
    </div>
  );
}

export default withRouter(App);

App.css

...

.global {
  background-color: red;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App /> //I also try to implement a css class with a new background color set for app but same issue
    </BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

Any help would be greatly appreciated :)

my site before changing color in my code

my site after changing color in my code with new color only on one part of my page, I scribbled in green the part where the color does not change but I would like it to change

CodePudding user response：

if you really want to change the colour of the whole page, you can just target body in your CSS, like

body{
  background-color: red;
}

You can make this change in your index.css and add this line in your body selector.

body {
  margin: 0;
  background-color: red;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

IMPORTANT NOTE

There may be a case where you have elements with their own background colour, and they will continue to have that until to specifically change each element CSS. Changing body or html background colour won't impact individual elements.

CodePudding user response：

Since you mentioned that you already tried adding CSS directly to body, and it doesn't work even then, then most probably there could be some CSS that's causing the body to not occupy the full width and height of the page.

Inspect the body element in your web page in a web browser and check if it covers the whole window or not..

Can't give any more accurate suggestions without looking at the generated HTML/CSS code or a URL Of the web page that you're working on.

CodePudding user response：

To be sure that the whole page is affected by the color change, you could try to target the html tag directly in a css file:

html {
  background-color: red;
}