How can i center the content of my footer? - css

Question

I am new to react material ui.
I am using this table here
https://material-ui.com/components/tables/
under Custom pagination actions section.
Inside, there is a contenet in the footer with Rows per page text buttons for next previous etc...
I can't find a way to center that content in the middle.Right not is it is 'aligned' to the right by default
I tried adding
align="center"
justify="center"
but without success
My footer code looks like this
<TablePagination
className=""
align="center"
justify="center"
text-align="center"
rowsPerPageOptions={[5, 10, {label: 'All', value: -1}]}
// colSpan={12}
count={props.rowsCount}
rowsPerPage={props.rowsPerPage}
page={props.page}
SelectProps={{
inputProps: {'aria-label': 'rows per page'},
native: true,
}}
onChangePage={props.onChangePage}
onChangeRowsPerPage={props.onChangeRowsPerPage}
ActionsComponent={TablePaginationActions}
/>
Table pagination actions
import KeyboardArrowLeft from '#material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '#material-ui/icons/KeyboardArrowRight';
import FirstPageIcon from '#material-ui/icons/FirstPage';
import LastPageIcon from '#material-ui/icons/LastPage';
import {makeStyles, useTheme} from '#material-ui/core/styles';
import {IconButton} from '#material-ui/core';
const useStyles = makeStyles((theme) => ({
root: {
flexShrink: 0,
marginLeft: theme.spacing(2.5),
},
}));
function TablePaginationActions(props) {
const classes = useStyles();
const theme = useTheme();
const {count, page, rowsPerPage, onChangePage} = props;
const c = console;
// c.table(props);
const handleFirstPageButtonClick = (event) => {
onChangePage(event, 0);
};
const handleBackButtonClick = (event) => {
onChangePage(event, page - 1);
};
const handleNextButtonClick = (event) => {
onChangePage(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<div className={classes.root}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</div>
);
}
export default TablePaginationActions;

Answer 1

I found a way.The problem was that react used out of the box class - MuiTablePagination-spacer
which had this css
MuiTablePagination-spacer {
flex: 1 1 100%;
}
that maked the other sibling div go to the right
with this css applied i justified my content in the center
.MuiToolbar-root {
justify-content: center !important;
border:2px solid red;
}
.MuiTablePagination-spacer {
flex: 0 !important;
}
MuiToolbar-root already has display:flex so i applied only justify-content. We must disable the spaces on MuiTablePagination-spacer, otherwise it won't work.