Javascript: 改变整个页面的颜色

Question

我正在为个人项目开发一个网站，背景颜色设置有问题。

无论我做什么来改变颜色，都只会改变页面内容器的颜色。我试图在 App.js 中的 div 添加 class 或在 App.css 的 css 正文属性中添加背景颜色，但没有作品。我在 index.html 中的 public 文件夹中添加了正文 <body style="background-color: red">，但仍然是同样的问题。

我把我的前端代码的一部分放在这里，之后我的问题截图，希望你能帮助我。

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;
}

任何帮助将不胜感激:)

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

Answer 1

如果你真的想改变整个页面的颜色，你可以在你的CSS中定位body，比如

body{
  background-color: red;
}

您可以在 index.css 中进行此更改并将此行添加到正文选择器中。

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;
}

重要提示

可能有这样一种情况，您的元素有自己的背景颜色，并且它们将继续具有这种背景，直到专门更改每个元素 CSS。更改 body 或 html 背景颜色不会影响单个元素。

Answer 2

既然你提到你已经尝试将 CSS 直接添加到 body，但它仍然不起作用，那么很可能是一些 CSS 导致了body 不占用页面的全部宽度和高度。

在网络浏览器中检查网页中的 body 元素，并检查它是否覆盖了整个 window..

如果不查看生成的 HTML/CSS 代码或您正在处理的 URL 网页，就无法提供更准确的建议。

Answer 3

要确保整个页面都受到颜色变化的影响，您可以尝试直接在 css 文件中定位 html 标记：

html {
  background-color: red;
}

Javascript: 改变整个页面的颜色

Javascript: change color of the entire page

javascript

css

reactjs

colors

background-color