gpt4 book ai didi

reactjs - 在 react-app 顶部遇到空白

转载 作者:行者123 更新时间:2023-12-05 00:54:42 28 4
gpt4 key购买 nike

enter image description here

图片

在 react-app 顶部遇到空白

检查图片

react-app 顶部出现了奇怪的空白。我开发的应用程序甚至不是一个大的 react 应用程序,而是有一些东西占据了那里的空间并在那里创造了一个空白空间。我删除了旧项目并做了这个新项目,认为它会消除我的错误,但结果相同。我正在使用路由包通过我的应用 react-route-dom 进行路由。我尝试了所有可能的方法,但找不到错误或触发 react-app 顶部空白的代码行。请任何人帮助我提交我的项目!

App.js

import React from 'react'
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}export default App

App.css

.App {
text-align: center;
background: red;
height: 30%;
}

Index.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 会为您的页面添加一些填充

关于reactjs - 在 react-app 顶部遇到空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65770679/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com