MUI DataGrid pageSizeOptions无法自定义，仅需显示25选项求助

你遇到的问题是因为动态传递[paginationModel.pageSize]作为pageSizeOptions时，组件初始化阶段可能出现状态同步问题，导致DataGrid fallback到默认的分页选项。以下是修复方案：

修复步骤 #

直接将pageSizeOptions设置为固定的[25]，而非依赖paginationModel的动态值，这样能确保组件一开始就识别到自定义的分页选项：

<div style={{ display: "flex", height: "100%" }}>
  <div style={{ flexGrow: 1 }}>
    <DataGrid
      autoHeight
      rows={users}
      columns={columns}
      paginationModel={paginationModel}
      onPaginationModelChange={setPaginationModel}
      pageSizeOptions={[25]} {/* 改为固定数组 */}
      rowCount={rowCountState}
      paginationMode="server"
      sortingMode="server"
      onSortModelChange={handleSortModelChange}
      loading={isLoading}
    />
  </div>
</div>

补充说明 #

如果后续需要动态调整分页选项，建议用useMemo包裹数组以保持引用稳定，避免不必要的重渲染：

const pageSizeOptions = React.useMemo(() => [paginationModel.pageSize], [paginationModel.pageSize]);

但就你当前需求（仅显示25）而言，直接写死[25]是最简单可靠的方式。

内容的提问来源于stack exchange，提问作者Dandydon