Material-UI(v5)のPaginationを中央寄せにする

個人的にハマったので備忘録

Material-UI Pagination
https://mui.com/material-ui/react-pagination/

中央寄せにするには

Material-UIのPaginationのトップ要素がnavであるため、
トップ要素にdisplay:inline-blockを適用し、Paginationの親要素にtext-align:centerを追記する必要がある。

PaginationのHTML

<nav aria-label="pagination navigation" class="MuiPagination-root WithStyles(ForwardRef(Pagination))-root-20">
  <ul class="MuiPagination-ul">
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to previous page"><svg class="MuiSvgIcon-root MuiPaginationItem-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg><span class="MuiTouchRipple-root"></span></button></li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to page 1">1<span class="MuiTouchRipple-root"></span></button></li>
    <li>
      <div class="MuiPaginationItem-root MuiPaginationItem-ellipsis">…</div>
    </li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to page 5">5<span class="MuiTouchRipple-root"></span></button></li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary Mui-selected" tabindex="0" type="button" aria-current="true" aria-label="page 6">6<span class="MuiTouchRipple-root"></span></button></li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to page 7">7<span class="MuiTouchRipple-root"></span></button></li>
    <li>
      <div class="MuiPaginationItem-root MuiPaginationItem-ellipsis">…</div>
    </li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to page 10">10<span class="MuiTouchRipple-root"></span></button></li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to next page"><svg class="MuiSvgIcon-root MuiPaginationItem-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg><span class="MuiTouchRipple-root"></span></button></li>
  </ul>
</nav>

コード

import * as React from "react";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import Pagination from "@mui/material/Pagination";

const theme = createTheme({
  components: {
    // PaginationのComponent name
    MuiPagination: {
      styleOverrides: {
        // PaginationのRule name
        root: {
          // CSS
          display: "inline-block"
        }
      }
    }
  }
});

export default function GlobalThemeOverride() {
  return (
    <div style={{ textAlign: "center" }}>
      <ThemeProvider theme={theme}>
        <Pagination count={10} />
      </ThemeProvider>
    </div>
  );
}

参考

Paginationの Component name, Rule name 参照元
https://mui.com/material-ui/api/pagination/