材质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;

但是，似乎纸的组件不允许网格扩展以占据其所有空间，就像我期望的那样：

如何获取纸质元素占用其容器的空间？

Answer 1

您可能想在容器中添加其他容器以使其看起来更紧凑。

在下面尝试代码，

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={0}>
          <Grid item container alignItems="center" xs={1}>
            <Paper>
              <Grid item xs={6} alignItems="center">
                <Avatar>JD</Avatar>
              </Grid>
              <Grid item xs={6} alignItems="center">
                John Doe
              </Grid>
            </Paper>
          </Grid>
          <Grid container spacing={0} xs={11}>
            <Grid item xs={6}>
              <Paper>xs=6</Paper>
            </Grid>
            <Grid item xs={6}>
              <Paper>xs=6</Paper>
            </Grid>
          </Grid>
        </Grid>
      </Container>
    </div>
  );
}

我还为您创建了一个实时沙箱：https://codesandbox.io/s/lucid-blackwell-411ds?fontsize=14&hidenavigation=1&theme=dark

Answer 2

如果您在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);