material-ui DataGridのpaginationラベルをローカライズしたい #React

DataGridのテキストローカライズ

参考：DataGrid API

DataGrid用のローカライズpropはlocaleTextにオブジェクト入れればできるんですが、デフォルトのソースを見る限りではフッターのパジネーション部分のキーがありませんでした。

TablePaginationが利用されている

DataGrid内部ではmaterial-uiのcoreで提供されているTablePaginationを使っているみたいでした。

参考：GridPagination.tsx

なので、単純にcreateMuiThemeからデフォルトpropを変更すれば良さそうです。

labelDisplayedRows propの上書き

createMuiTheme > props > MuiTablePagination > labelDisplayedRowsにカスタマイズしたいように置くだけです。

参考：TablePagination API

const theme = createMuiTheme({
  props: {
    MuiTablePagination: {
      labelDisplayedRows: ({
        from,
        to,
        count,
      }: LabelDisplayedRowsArgs) => {
        return `${from}-${to} / ${count !== -1 ? count : `${to}以上`}`;
      },
    },
  },
});