时间戳

首页 > 解决方案 > 为什么容器没有填满整个屏幕？

reactjs - 为什么容器没有填满整个屏幕？

问题描述

我正在尝试为我的 React 路线之一设置黑色背景。但是当页面被渲染时，看起来我设置黑色背景的容器没有覆盖整个屏幕。即使我将 App.js 中 div 中的背景设置为黑色，容器也不会完全覆盖屏幕。我在下面包含了我的代码的缩短版本。

foo.js 路由

import React from 'react';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import { withStyles } from '@material-ui/core/styles';


const StyledContainer = withStyles({
    root: {
        background: 'black',
        width: '100vw',
        height: '100vh'
    }
  })(Container);



export default function Foo(){
    return(
        <StyledContainer>
            <Grid
                container
                spacing={0}
                direction="column"
                alignItems="center"
                justify="center"
                style={{ minHeight: '100vh' }}
            >
                Hello World
            </Grid>
        </StyledContainer>
    )
}

应用程序.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Foo from './routes/Foo';

function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact to path="/foo">
            <Foo />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

标签： reactjsmaterial-ui

解决方案

确保您在 index/App 上导入了一个包含全局样式的 css 文件（类似于通过npx create-react-app app-name.

在那里，您需要具有以下样式以避免默认边距/边框：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
};

推荐阅读