Material UI React paper component in nested grid display issues

Question

I have the following code that has a paper component in a nested grid:

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;

However, it seems that the paper component doesn't allow the grid to stretch out to occupy all of it's space as I would expect:

How do I get the paper element to take up the space of its container?

Answer 1

If you set the height and width to 100% on the Paper elements, they will use up the full space of the Grid items as desired.

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);

Answer 2

You might want to add an other container inside container to things to look more compact.

Try code below,

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>
  );
}

I have also created a live sandbox for you: https://codesandbox.io/s/lucid-blackwell-411ds?fontsize=14&hidenavigation=1&theme=dark