如何更改反应应用程序的根背景颜色

Question

我已经建立了一个 react 网站，在桌面上一切看起来都很好，当你滚动经过导航栏时，背景保持相同的灰色。然而，在移动设备上，左右边缘是白色的，如果你向上滚动导航栏，你就能看到白色背景。有谁知道这个问题的解决方案？我在我的 CSS 中为 App、html 和 body 设置了 background-color，但它们似乎都没有解决这个问题。 这是我的CSS：

/* .App,
.App-header,
html {
  background-color: #282c34;
} */

.App {
  text-align: center;
  background-color: #282c34;
}

.logo {
  width: auto;
  height: 20px;
}

.title,
.body-text {
  padding-top: 10px;
  color: darkgrey;
}

html {
  /* padding-left: 15px;
  padding-right: 15px; */
  background-color: #282c34;
}

body {
  padding-top: 50px;
}

.projectImage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.project-thumbnail-reg {
  position: relative;
  height: auto;
  min-width: 400px;
  max-width: 800px;
}

.project-thumbnail-sm {
  position: relative;
  height: auto;
  min-width: 300px;
  max-width: 800px;
}

.project-thumbnail-reg:hover .overlay {
  opacity: 0.8;
}

.project-thumbnail-sm:hover .overlay {
  opacity: 0.8;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: auto;
  opacity: 0;
  transition: 0.5s ease;
  background-color: rgb(31, 28, 28);
  border-radius: 20px;
}

.itemText {
  color: whitesmoke;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#project-title {
  /* padding-bottom: 35px; */
  top: 40%;
  left: 50%;
  font-weight: bold;
}

#project-category {
  /* padding-top: 30px; */
  top: 60%;
  left: 50%;
}

.formLabel {
  color: whitesmoke;
}

#inlineMessageSuccess {
  color: green;
}
#inlineMessageFail {
  color: red;
}

.PageNotFound {
  color: darkgrey;
  padding-top: 150px;
  font-size: 50pt;
}

这是我的 App.js：

import React from "react";

import {
  BrowserRouter as Router,
  Route,
  Redirect,
  Switch,
} from "react-router-dom";

import Home from "./Pages/Home";
import Projects from "./Pages/Projects";
import Contact from "./Pages/Contact";
import ProjectPage from "./Pages/ProjectPage";
import PageNotFound from "./Pages/PageNotFound";

import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Nav } from "react-bootstrap";
import "./App.css";

import logo from "./assets/logo/logo_trans.png";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar fixed="top" bg="dark" variant="dark">
          <Navbar.Brand style={{ alignContent: "center" }}>
            <img src={logo} className="logo" alt="" />
          </Navbar.Brand>
          <Nav className="mr-auto">
            <LinkContainer to="/home">
              <Nav.Link>Home</Nav.Link>
            </LinkContainer>
            <LinkContainer to="/projects">
              <Nav.Link>Projects</Nav.Link>
            </LinkContainer>
            <LinkContainer to="/contact">
              <Nav.Link>Contact</Nav.Link>
            </LinkContainer>
          </Nav>
        </Navbar>
        {/* Router Setup */}
        <Switch>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
          <Route exact path="/home" component={Home} />
          <Route exact path="/projects" component={Projects} />
          <Route exact path="/contact" component={Contact} />
          <Route path="/project/:id" component={ProjectPage} />
          <Route path="*" component={PageNotFound} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

Answer 1

我认为这是您的 CSS、ex 的宽度和可能高度的问题。身体不是很好缩放吗？不看一些代码就不容易分辨。