material-uiのdata-gridのLocalizationが効かない件

material-uiのドキュメントに載っていた@material-ui/data-gridを使おうとしたが
Localizationが効かなくて困ったので、自分が施した対策をこの記事に載せる。

まず公式ドキュメントには

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { DataGrid, bgBG } from '@material-ui/data-grid';
import { bgBG as coreBgBG } from '@material-ui/core/locale';

const theme = createMuiTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  bgBG,//ここでLocalizationの情報を渡して上げるみたい
  coreBgBG,
);

<ThemeProvider theme={theme}>
  <DataGrid />
</ThemeProvider>;

このように書いてあるがうまく行かず、次にDataGrid要素に直接、Localizationの情報を渡してあげることに

import { DataGrid, jaJP } from '@material-ui/data-grid';

<DataGrid localeText={nlNL.props.MuiDataGrid.localeText} />;

このようにlocaleTextにLocalizationの情報を渡せるみたいだが、これでもうまく行かず
調べてみると

import { DataGrid, jaJP } from '@material-ui/data-grid';

<DataGrid localeText={nlNL.components.MuiDataGrid.localeText} />;

でうまく行った。
なお筆者は自前で

import {GridLocaleText} from "@material-ui/data-grid";

const dataGridJaJP: Partial<GridLocaleText> = {
    // Root
    noRowsLabel: '行がありません',
    // noResultsOverlayLabel: 'No results found.',
    errorOverlayDefaultLabel: 'エラーが発生しました。',

    // Density selector toolbar button text
    toolbarDensity: '行間隔',
    toolbarDensityLabel: '行間隔',
    toolbarDensityCompact: 'コンパクト',
    toolbarDensityStandard: '標準',
    toolbarDensityComfortable: 'ひろめ',

    // Columns selector toolbar button text
    toolbarColumns: '列一覧',
    toolbarColumnsLabel: '列選択',

    // Filters toolbar button text
    toolbarFilters: 'フィルター',
    toolbarFiltersLabel: 'フィルター表示',
    toolbarFiltersTooltipHide: 'フィルター非表示',
    toolbarFiltersTooltipShow: 'フィルター表示',
    toolbarFiltersTooltipActive: (count) => `${count}件のフィルターを適用中`,

    // Export selector toolbar button text
    toolbarExport: 'エクスポート',
    toolbarExportLabel: 'エクスポート',
    toolbarExportCSV: 'CSVダウンロード',

    // Columns panel text
    columnsPanelTextFieldLabel: '列検索',
    columnsPanelTextFieldPlaceholder: '検索クエリを入力...',
    columnsPanelDragIconLabel: '列並べ替え',
    columnsPanelShowAllButton: 'すべて表示',
    columnsPanelHideAllButton: 'すべて非表示',

    // Filter panel text
    filterPanelAddFilter: 'フィルター追加',
    filterPanelDeleteIconLabel: '削除',
    filterPanelOperators: 'オペレータ',
    filterPanelOperatorAnd: 'And',
    filterPanelOperatorOr: 'Or',
    filterPanelColumns: '列',
    filterPanelInputLabel: '値',
    filterPanelInputPlaceholder: '値を入力...',

    // Filter operators text
    filterOperatorContains: '...を含む',
    filterOperatorEquals: '...に等しい',
    filterOperatorStartsWith: '...で始まる',
    filterOperatorEndsWith: '...で終わる',
    filterOperatorIs: '...である',
    filterOperatorNot: '...でない',
    filterOperatorAfter: '...より後ろ',
    filterOperatorOnOrAfter: '...以降',
    filterOperatorBefore: '...より前',
    filterOperatorOnOrBefore: '...以前',
    // filterOperatorIsEmpty: 'is empty',
    // filterOperatorIsNotEmpty: 'is not empty',

    // Column menu text
    columnMenuLabel: 'メニュー',
    columnMenuShowColumns: '列表示',
    columnMenuFilter: 'フィルター',
    columnMenuHideColumn: '列非表示',
    columnMenuUnsort: 'ソート解除',
    columnMenuSortAsc: '昇順ソート',
    columnMenuSortDesc: '降順ソート',

    // Column header text
    columnHeaderFiltersTooltipActive: (count) => `${count}件のフィルターを適用中`,
    columnHeaderFiltersLabel: 'フィルター表示',
    columnHeaderSortIconLabel: 'ソート',

    // Rows selected footer text
    footerRowSelected: (count) => `${count}行を選択中`,

    // Total rows footer text
    footerTotalRows: '総行数:',

    // Total visible rows footer text
    // footerTotalVisibleRows: (visibleCount, totalCount) =>
    //   `${visibleCount.toLocaleString()} of ${totalCount.toLocaleString()}`,
};


export default dataGridJaJP

のようなファイルを作り、localeTextに渡すことにした。
もし他にもっとスマートやり方があったらご教授願いたい。