css - 如何更改反应应用程序的根背景颜色
问题描述
我已经建立了一个反应网站,在桌面上一切看起来都很好,当你滚动浏览导航栏时,背景保持相同的灰色。然而在移动设备上,左右边缘是白色的,如果你向上滚动导航栏,你就能看到白色背景。有谁知道这个问题的解决方案?我已经background-color
在我的 CSS 中为 App、html 和 body 设置了,但是它们似乎都没有解决这个问题。这是我的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;
解决方案
我相信这是您的 CSS、ex 的宽度和可能高度的问题。身体不是很好缩放吗?不看一些代码就不容易分辨。
推荐阅读
- azure - Azure powershell runbook 不显示任何输出
- r - R ggplot2 将图例文本修复为值和颜色
- sql - 简单的 jsonb_agg ORDER BY
- c# - 如何在同一类的其他对象中找到未指定变量的值?C#
- java - FileWriter 不写入输出文件
- c++ - 在 C++ 中制作大树时出现分段错误
- python - 大写字母的凯撒密码
- python - 具有重复列名的 Python unpivot 数据框
- python - pandas:如何在行匹配查询后获取每 n 行的组?
- android - 如何将 linkWithCredential 与 verifyPhoneNumber 一起使用?