0

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;
4

1 回答 1

0

我找到了一种方法。问题是反应使用开箱即用的类 -MuiTablePagination-spacer 它有这个 css

MuiTablePagination-spacer {
    flex: 1 1 100%;
}

这使另一个兄弟 div 向右移动

应用了这个 css，我在中心证明了我的内容

.MuiToolbar-root {
    justify-content: center !important;
    border:2px solid red;
}

.MuiTablePagination-spacer {
    flex: 0 !important;
}

MuiToolbar-root 已经有了display:flex，所以我只应用了 justify-content。我们必须禁用 上的空格MuiTablePagination-spacer，否则它将不起作用。

于 2021-03-22T07:55:25.430 回答