如何更改DataGrid中分页的标签值（material ui）

Question

我正在使用 Material-ui 中的 DataGrid，它为我提供了一个带有分页和过滤器的数组

 <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]}
      />

我想更改分页中的标签值，但保留 DataGrid。

我已经看到了制作外部 TablePagination 组件的可能性，但我想保留 Datagrid 而不是单独制作组件。我可以添加到数据网格来更改标签吗？

Answer 1

您可以使用 ComponentsProps 属性并更改分页中的 labelRowsPerPage

像这样 ：

 <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]}
        componentsProps={{
          pagination: {
            labelRowsPerPage: "new label for rows per page",
          }
         }}
      />

这是一个 codeandbox，我更改了它的标签

https://codesandbox.io/s/optimistic-antonelli-kp88le?file=/src/App.js