如何对齐表分页内部组件（标题，操作）

Question

我能够将'整个'表分页居中，但是我无法将MaterialUI中tablePagination的内部组件与下面的代码分开对齐，我想将分页标题和'正确'动作组件居中。

Pagination: {
   display:'flex',
   justifyContent: 'center',  
   width: "100%",  
   alignItems: 'left',
   padding:'0px',
},
PaginationCaption: {
    color: 'white',
    fontSize: '1.8rem',
    flexShrink: 0,
    // width: '50%',
    textAlign: 'center',
},
PaginationSelectIcon: {
    color: 'white',
    fontSize: '1.8rem'
},
PaginationSelect: {
    color: 'white',
    fontSize: '1.8rem'
},
PaginationActions: {
    color: 'white',
    fontSize: '1.8rem',
    // width: '50%',
    textAlign: 'right',
}


<Grid container   
  alignItems="center"
  justify="center"            
>                 
<Grid item xs={12} style={{height:'38vh'}}>
      <div className={classes.tableWrapper}>
        <Table className={classes.table}>
          <TableHead style={{backgroundColor:'#4e4e4e'}}>
            <TableRow >
              <TableCell component="th" scope="row" className= 
 {classes.tablecell} style={{width: '20%'}}> License Plate</TableCell>
              <TableCell align="right" className={classes.tablecell} 
 style={{width: '20%'}}> Status</TableCell>
              <TableCell align="right" className={classes.tablecell} 
 style={{width: '20%'}}> IN   </TableCell>
              <TableCell align="right" className={classes.tablecell} 
 style={{width: '20%'}}> OUT  </TableCell>
              <TableCell align="right" className={classes.tablecell} 
 style={{width: '20%'}}> Time on-site</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.slice(page * rowsPerPage, page * rowsPerPage + 
 rowsPerPage).map(row => (
              <TableRow key={row.name} >
                <TableCell component="th" scope="row" className= 
{classes.tablecell}>
                  {row.name}
                </TableCell>
                <TableCell align="right" className={classes.tablecell}> 
 {row.calories}</TableCell>
                <TableCell align="right" className={classes.tablecell}> 
{row.fat}</TableCell>
                <TableCell align="right" className={classes.tablecell}> 
{row.calories}</TableCell>
                <TableCell align="right" className={classes.tablecell}> 
{row.fat}</TableCell>
              </TableRow>
            ))}

            {emptyRows > 0 && (
              <TableRow style={{ height: 48 * emptyRows }}>
                <TableCell colSpan={6} />
              </TableRow>
            )}
          </TableBody>
          </Table>
          </div>
              <TablePagination    
                component="div"  
                className={classes.Pagination}        
                classes={{
                  // root: classes.Pagination,
                  caption: classes.PaginationCaption,
                  selectIcon: classes.PaginationSelectIcon,
                  select: classes.PaginationSelect,
                  actions: classes.PaginationActions,
                }}
                // rowsPerPageOptions={[5, 7, 10]}
                colSpan={5}                   // Important!!!!
                count={rows.length}
                rowsPerPageOptions={[]}       //added
                rowsPerPage={rowsPerPage}
                page={page}
                SelectProps={{
                  inputProps: { 'aria-label': 'Rows per page' },
                  native: true,
                }}
                onChangePage={handleChangePage}
                onChangeRowsPerPage={handleChangeRowsPerPage}
                ActionsComponent={TablePaginationActions}
              />
      </Grid>
    </Grid>

我也研究了tablePagination的源代码，并在那里尝试了CSS样式。但是结果是一样的。