Appbar not visible with Table on the same page - ReactJS - reactjs

Question

I'm new to ReactJS and I'm trying to put a table on a page with an AppBar. Both of these components are from Material UI, but only the Table is displayed, the AppBar seems to be just hidden.
I don't really get what is happening.
Here is the code (full):
import React from 'react';
import {Grid, Typography, Paper, Box, Toolbar, AppBar, ThemeProvider, createMuiTheme} from '#material-ui/core';
import Button from '#material-ui/core/Button';
import Table from '#material-ui/core/Table';
import TableBody from '#material-ui/core/TableBody';
import TableCell from '#material-ui/core/TableCell';
import TableContainer from '#material-ui/core/TableContainer';
import TableHead from '#material-ui/core/TableHead';
import TableRow from '#material-ui/core/TableRow';
import { withStyles, makeStyles } from '#material-ui/core/styles';
const CustomCell = withStyles((theme) => ({
head: {
backgroundColor: '#3f51b5',
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}))(TableCell);
const CustomRow = withStyles((theme) => ({
root: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
},
}))(TableRow);
function createData(registration_nr, name, surname, e_mail) {
return {registration_nr, name, surname, e_mail};
}
const rows = [
createData('IE0001', 'Johnson', 'John', 'interesting_mail#domain.com'),
createData('IR0001', 'Dan', 'Thomas', 'interesting_mail#domain.com'),
createData('IA0011', 'Thompson', 'Bob', 'interesting_mail#domain.com'),
createData('MI0021', 'Martinez', 'Nancy', 'interesting_mail#domain.com'),
createData('MA0021', 'Gomez', 'Freddy', 'interesting_mail#domain.com'),
createData('ME0201', 'Charles', 'Diane', 'interesting_mail#domain.com'),
];
const useStyles = makeStyles({
table: {
minWidth: 300,
},
});
export default function BookView() {
const paperStyle = { padding: '0px 0px', width: 'auto', margin: '4px auto', textAlign: 'top-center', background: 'transparent', display: 'flex' }
const btnStyle = { width: '12vw', background: '#3f51b5', color: '#FFFFFF', height: '2.4vw', marginLeft: '40px', marginRight: '40px'}
const boxStyle = { background:'#FFFFFF', textAlign:'center', padding:'2px 2px', marginTop:9, justifyContent:'center', height:500 }
const narrowBox = { background:'#FFFFFF', textAlign:'center', padding:'0px 10px', width:'15%', margin:0, height:'100%'};
const container = { display: 'flex', justifyContent: 'center', fontSize:'1.12vw' }
// let day = getCurrentDate('-');
// const datas = [{ startDate: '2018-11-01T09:45', endDate: '2018-11-01T11:00', title: 'Just for the sake of working' }];
const classes = useStyles();
return (
<Grid>
<AppBar position='static' style={{background: '#757de8', marginTop: 'auto'}}>
<Toolbar gutterBottom>
<Paper style={paperStyle} elevation={0}>
<Button href="/signin" style={btnStyle}>Sign in</Button>
<Typography variant='h6' style={container}>The Library of 'Murica</Typography>
<Button href="/register" style={btnStyle}>Register</Button>
<Button href="/" style={btnStyle}>Home</Button>
</Paper>
</Toolbar>
</AppBar>
<Paper style={paperStyle} elevation={0}>
<TableContainer component={Grid}>
<Table className={classes.table} aria-label="customized table">
<TableHead>
<TableRow>
<CustomCell>Numar matricol</CustomCell>
<CustomCell align="right">Nume</CustomCell>
<CustomCell align="right">Prenume</CustomCell>
<CustomCell align="right">E-mail</CustomCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<CustomRow key={row.registration_nr}>
<CustomCell component="th" scope="row">{row.registration_nr}</CustomCell>
<CustomCell align="right">{row.name}</CustomCell>
<CustomCell align="right">{row.surname}</CustomCell>
<CustomCell align="right">{row.e_mail}</CustomCell>
</CustomRow>
))}
</TableBody>
</Table>
</TableContainer>
</Paper>
</Grid>
);
}
I tried with Paper, Box, but worthless. The table seems to be the only thing that is displayed on that page, no matter what I try.

Answer 1

Your code seems to be working fine on codesandbox, unless I'm missing something...