#reactjs #material-ui #appbar
Вопрос:
Я новичок в ReactJS и пытаюсь разместить таблицу на странице с панелью приложений. Оба эти компонента взяты из пользовательского интерфейса Material, но отображается только таблица, панель приложений, похоже, просто скрыта.
Я действительно не понимаю, что происходит.
Вот код (полный):
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: {
'amp;: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>
);
}
Я пробовал с Бумагой, Коробкой, но ничего не вышло. Похоже, что таблица-единственное, что отображается на этой странице, что бы я ни пытался.
Ответ №1:
Ваш код, похоже, отлично работает с codesandbox, если только я чего-то не упускаю…
Комментарии:
1. похоже, я просто перезапустил приложение с консоли, и оно сработало как волшебство. Все равно спасибо!