Appbar not visible with Table on the same page - 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', '[email protected]'),
    createData('IR0001', 'Dan', 'Thomas', '[email protected]'),
    createData('IA0011', 'Thompson', 'Bob', '[email protected]'),
    createData('MI0021', 'Martinez', 'Nancy', '[email protected]'),
    createData('MA0021', 'Gomez', 'Freddy', '[email protected]'),
    createData('ME0201', 'Charles', 'Diane', '[email protected]'),
];

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...