如何使表格在Material UI Paper元素上居中

Question

我遇到的问题是我试图将固定大小的表格居中放在页面中间（在Paper组件中），但失败了。我在Material-ui中也很新，所以我不确定这是否是构造此类项目的正确方法。您能帮我在页面中间居中吗？

import rows from "./mockdata/mock_dashboard";
const rowsData = rows;

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  paper: {
    marginTop: theme.spacing(3),
    width: "100%",
    overflowX: "auto",
    marginBottom: theme.spacing(2),
    margin: "auto"
  },
  table: {
    minWidth: 650,
    maxWidth: 1200
  }
}));

export default function MainDashboard() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              <TableCell>Nz.</TableCell>
              <TableCell>Data Przyjęcia</TableCell>
              <TableCell>Koordynator</TableCell>
              <TableCell>Link do Pliku</TableCell>
              <TableCell>Dod. opis</TableCell>
              <TableCell>Data Wykonania</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rowsData.map(row => (
              <TableRow key={row.orderNo}>
                <TableCell component="th" scope="row">
                  {row.orderNo}
                </TableCell>
                <TableCell align="center">{row.orderDate}</TableCell>
                <TableCell align="center">{row.coordinator}</TableCell>
                <TableCell align="center">{row.link}</TableCell>
                <TableCell align="center" className={classes.descriptionFont}>
                  {row.description}
                </TableCell>
                <TableCell align="center">{row.dueDate}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
    </div>
 );

Answer 1

如何将表格包装在固定的Container中并摆脱固定的表格宽度？这是Material-ui布局的基本元素。

<div class="cc">
	<div class="cc-block block_1">
		<div>
			<h2>Some Heading</h2>
			<p>Some Paragraph</p>
		</div>
	</div>
	<div class="cc-block block_2">
		<div>
			<h2>Some Heading</h2>
			<p>Some Paragraph</p>
		</div>
	</div>
	<div class="cc-block block_3">
		<div>
			<h2>Some Heading</h2>
			<p>Some Paragraph</p>
		</div>
	</div>
	<div class="cc-block block_4">
		<div>
			<h2>Some Heading</h2>
			<p>Some Paragraph</p>
		</div>
	</div>
	<div class="cc-block block_5">
		<div>
			<h2>Some Heading</h2>
			<p>Some Paragraph</p>
		</div>
	</div>
	<div class="cc-block block_6">
		<div>
			<h2>Some Heading</h2>
			<p>Some Paragraph</p>
		</div>
	</div>
</div>