MUI DataGrid Error: TypeError: Cannot read properties of undefined (reading 'MuiDataGrid')

user_7206191 0
Viewed 2595

I was trying to change the language of the default parameters of my DataGrid MUI parameters and for some reason I'm getting an error when I try to add the localeText I'm following the exact instructions from their resource page, Locale Text

enter image description here

This is the error it shows:

enter image description here

This is what I'm doing (just adding relevant code):

import { DataGrid, esES} from '@mui/x-data-grid';

<DataGrid 
  localeText={esES.props.MuiDataGrid.localeText}
  rows={estudiantes}
  columns={columns}
  autoPageSize 
/>
material-ui reactjs locale datagrid
1 Answers

I think the docs is outdated, if you log the esES variable you will know what to put in localeText:

<DataGrid
  {...data}
  localeText={esES.components.MuiDataGrid.defaultProps.localeText}
  components={{
    Toolbar: GridToolbar
  }}
/>

In v4, esES.props.MuiDataGrid.localeText can be used because this is how you override the default props:

const theme = createTheme({
  props: {
    MuiDataGrid: {
      localeText: {...},
    },
  },
});

In v5, it's esES.components.MuiDataGrid.defaultProps.localeText because the default props path is changed to:

const theme = createTheme({
  components: {
    MuiDataGrid: {
      defaultProps: {
        localeText: {...},
      },
    },
  },
});

Live Demo

Codesandbox Demo

Reference

user_94494260
Related