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

我可以将“整个”表格分页居中，但无法将MaterialUI中的表格分页的内部组件与下面的代码分别对齐。我希望将分页标题和“右”操作组件居中

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>

分页：{
显示：'flex'，
为内容辩护：“中心”，
宽度：“100%”，
对齐项目：“左”，
填充：'0px'，
},
分页能力：{
颜色：'白色'，
fontSize:'1.8rem'，
flexShrink:0，
//宽度：“50%”，
textAlign:'中心'，
},
分页选择图标：{
颜色：'白色'，
字体大小：“1.8rem”
},
页码选择：{
颜色：'白色'，
字体大小：“1.8rem”
},
分页操作：{
颜色：'白色'，
fontSize:'1.8rem'，
//宽度：“50%”，
textAlign:'右'，
}
车牌
地位
在里面
出来
现场时间
{rows.slice（page*rowsPerPage，page*rowsPerPage+
rowsPerPage.map（行=>(
{row.name}
{row.carries}
{row.fat}
{row.carries}
{row.fat}
))}
{emptyRows>0&&(
)}

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