reactjs - Appbar 与 Table 在同一页面上不可见

问题描述

我是 ReactJS 的新手，我正在尝试在带有 AppBar 的页面上放置一个表格。这两个组件都来自 Material UI，但只显示了 Table，AppBar 似乎只是隐藏了。

我真的不明白发生了什么。

这是代码（完整）：

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

我试过纸，盒子，但一文不值。无论我尝试什么，该表似乎都是该页面上显示的唯一内容。

标签： reactjsmaterial-uiappbar

reactjs - Appbar 与 Table 在同一页面上不可见 - ReactJS

问题描述

解决方案

推荐阅读