如何修改Material UI DataGrid分页组件的标签文本

完全可以通过DataGrid自带的localeText属性实现，不用替换外部分页组件。这个属性允许你自定义组件内所有默认文本，包括分页相关的标签。

具体配置步骤 #

在你的DataGrid组件中添加localeText属性，针对分页相关的文本进行自定义：

<DataGrid
  rows={OffersFilteredData}
  getRowId={(row) => row?._id}
  sx={{
    boxShadow: 5,
    border: 2,
    borderColor: '#fff',
    '& .MuiDataGrid-cell:hover': {
      color: 'primary.main',
    },
  }}
  columns={columns}
  checkboxSelection
  selectionModel={offersChecked?.map((obj) => Object.values(obj)[0])}
  onSelectionModelChange={(ids) => {
    onRowsSelectionHandler(ids);
  }}
  rowsPerPageOptions={[5, 10, 20, 50, 100]}
  // 新增的分页文本配置
  localeText={{
    // 自定义"每页行数"的标签
    rowsPerPage: '每页显示',
    // 自定义分页显示范围的文本，{from} {to} {count}是内置占位符，分别对应当前页起始行、结束行、总行数
    displayedRows: ({ from, to, count }) => `${from}-${to} / ${count === -1 ? '全量' : count}`,
    // 还可以自定义其他分页相关文本，比如跳转页的提示
    jumpToPage: '跳转到',
    page: '页',
  }}
/>

关键配置项说明 #

• rowsPerPage：对应分页栏里"Rows per page"的文本
• displayedRows：控制当前显示范围的描述文本，支持通过函数接收from、to、count三个参数动态生成内容（count为-1时表示数据未分页）
• 其他可选的分页相关文本：jumpToPage（跳转页提示）、page（"页"字）、firstPage（首页按钮文本）、lastPage（末页按钮文本）、nextPage（下一页按钮文本）、previousPage（上一页按钮文本）

你可以根据自己的需求，选择性修改这些文本内容，完全不需要依赖外部分页组件。

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