Material UI React paper component in nested grid display issues - reactjs

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