Cannot access pagination styling

[markedwards]

material-react-table version

v3.0.1

react & react-dom versions

v18.3.1

Describe the bug and the steps to reproduce it

I would like to make adjustments to the pagination styling (for instance font sizes), but setting muiPaginationProps.sx does not seem to have any effect.

Minimal, Reproducible Example - (Optional, but Recommended)

Can add if necessary.

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not have time to dig into it

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[MylesWardell]

Had the same question, looked at the source code. Looks like pagination is part of muiBottomToolbarProps. Which you can restyle their using SX.

In saying that the access is limited with no unique classNames on areas that you would want to restyle. I would appreciate more classNames here.

[markedwards]

It's super hacky to style the pagination, this really needs to be improved. It should be addressable via the MUI theme.

[markedwards]

I ended up with:

muiBottomToolbarProps: {
  sx: {
    minHeight: 45,
    ".MuiTablePagination-root": {
      height: 45,
      py: 0,
      ".MuiInputLabel-root, .MuiTypography-root": {
        fontSize: 14,
      },
    },
  },
},

[FutureKode]

I want to put the pagination on the left side, is there an easy way to do that?