MUIページ名の適用方法+ポスト

Googleがサポートするマテリアルui(以下muiと略す)には、複数のUIライブラリが含まれています.私の場合は主にModel、Dialog、Pagination、Skeletonなどを使います.
その中でPaginationと言いたいのは

ページ名は、通常、上記の形式でデータを一度にロードするのではなく、一部のみをインポートするために使用されます.このため、パラメータはAPIを呼び出すときに何個ロードするかを設定する必要があります.
MUIのPaginationのページを見て、いろいろな道具をあげることができます.よく使う道具をいくつか紹介します.

page:現ページ

count:総ページ数

onChange:ページ名で左、右矢印または他のページをクリックしたときに発生する関数

sx:定義スタイル

size:総サイズ設定

renderItem:直接ページ設定用

import { Pagination, PaginationItem } from "@mui/material";

...

const [currentPage, setCurrentPage] = useState(1);
const onPageChange = (e: React.ChangeEvent<unknown>, page: number) => {
    setCurrentPage(page);
  };

...

<Pagination
  count={Math.ceil(data.total / COUNT_PER_PAGE)}
  page={currentPage}
  onChange={onPageChange}
  size="medium"
  sx={{
    display: "flex",
    justifyContent: "center",
    padding: "15px 0",
  }}
  renderItem={(item) => (
    <PaginationItem {...item} sx={{ fontSize: 12 }} />
  )}
/>

...

このように使えます.
ステータスとして宣言されたcurrentPageをonChangeに変更します.
PaginationのItemを直接カスタマイズする場合は、RenderItem propで上記の設定を行います.

に感銘を与える

material uiを使用することで、基本形状のUIライブラリを簡単にインポートできます.
ただし、単純な設計変更だけでなくカスタマイズが必要な場合は、マテリアルuiは推奨されません.

深くカスタマイズできるライブラリではなく、さまざまなUIをすばやくインポートするライブラリだと思います。

MUIが提供する基本的なフォーマットを変更せずに、インポートするかカスタマイズするかを正確に決定できる場合は、非常に役立つライブラリだと思います.