reactjs - Material UI React Paper 组件在嵌套网格显示问题

Question

我有以下代码，在嵌套网格中有一个纸质组件:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {
  Container,
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Button,
  Paper,
  Grid,
  Avatar,
} from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';

function App() {
  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6">AwesomeApp</Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
      <Container style={{marginTop: '1em'}}>
        <Grid container spacing={2}>
          <Grid item container alignItems="center" xs={4}>
            <Paper>
              <Grid item xs={6} alignItems="center">
                <Avatar>JD</Avatar>
              </Grid>
              <Grid item xs={6} alignItems="center">
                John Doe
              </Grid>
            </Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper>xs=6</Paper>
          </Grid>
          <Grid item xs={2}>
            <Paper>xs=6</Paper>
          </Grid>
        </Grid>
      </Container>
    </div>
  );
}

export default App;

但是，似乎纸张组件不允许网格拉伸(stretch)以占据它的所有空间，如我所料:



如何让纸元素占据其容器的空间？

Answer 1

如果在 Paper 上将高度和宽度设置为 100%元素，它们将用完 Grid 的全部空间根据需要的项目。

import React from "react";
import ReactDOM from "react-dom";
import {
  Container,
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Button,
  Paper,
  Grid,
  Avatar
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  paper: {
    width: "100%",
    height: "100%"
  }
});
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6">AwesomeApp</Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
      <Container style={{ marginTop: "1em" }}>
        <Grid container spacing={2}>
          <Grid item container alignItems="center" xs={4}>
            <Paper className={classes.paper}>
              <Grid item xs={6} alignItems="center">
                <Avatar>JD</Avatar>
              </Grid>
              <Grid item xs={6} alignItems="center">
                John Doe
              </Grid>
            </Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>xs=6</Paper>
          </Grid>
          <Grid item xs={2}>
            <Paper className={classes.paper}>xs=2</Paper>
          </Grid>
        </Grid>
      </Container>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);