reactjs - 在 react-app 顶部遇到空白
问题描述
图片
在 react-app 顶部遇到空白
检查图像
react-app 的顶部出现了奇怪的空白。我开发的应用程序甚至不是一个大的反应应用程序,而是有一些东西占据了那里的空间并在那里创造了一个空白空间。我删除了旧项目并做了这个新项目,认为它会消除我的错误,但结果相同。我正在使用路由包来路由我的应用react-route-dom。我尝试了所有可能的方法,但找不到错误或触发 react-app 顶部空白的代码行。请任何人帮助我必须提交我的项目!
应用程序.js
import React from 'react'
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}export default App
应用程序.css
.App {
text-align: center;
background: red;
height: 30%;
}
索引.js
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'
const app = <BrowserRouter><App/></BrowserRouter>
ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root') );
reportWebVitals()
**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;
background: #333;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
解决方案
将此添加到您的index.css :
*{
margin: 0;
padding: 0;
box-sizing: border-box; // not neccesary
}
发生这种情况是因为默认情况下 chrome 会为您的页面添加一些填充
推荐阅读
- javascript - 异步函数存储另一个异步函数的数据
- rest - 使用机器人框架和 REST 上传带有 Post 请求的 zip 文件
- c# - 我应该在哪里过滤微服务架构模式中的 MS 级外部服务响应?
- powershell - 如何使用powershell运行cmd命令
- javascript - 使用节点中嵌套对象的字符串文字进行 JSON 解析
- javascript - 如何确定使用 JavaScript 进行电子邮件混淆是否有效?
- python-3.x - TypeError:“PngImageFile”对象不可迭代
- java - 硒 moveToElement() 到硒
- django - 如何在我的序列化程序中创建一个字段以避免“TypeError:无法解压缩不可迭代的地址对象”错误?
- python-3.x - 如何使用 np.column_stack 将具有不同列维度(相同行维度)的 4 个向量压缩到 Python 中的变量中?