[DataGrid] Using an array for theme.spacing causes error spam in console ("The `theme.spacing` array type cannot be combined with non integer values")

[philer-jambit]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

A couple of components in the @mui/x-data-grid are relying on fractional values for theme.spacing, resulting in the following error to get output repeatedly into the console:

MUI: The `theme.spacing` array type cannot be combined with non integer values.You should either use an integer value that can be used as index, or define the `theme.spacing` as a number.

The same issue was previously fixed for Divider in mui/material-ui#29479 and is more generally being discussed in mui/material-ui#29677. Until mui/material-ui#29677 has found a decision it would be welcome (and spare developers some bug tracking) to have the same fix in place that was done for mui/material-ui#29479.

A quick search shows the following components are calling theme.spacing with fractional values:

• GridToolbarContainer
• GridFilterForm
• GridPanelFooter
• GridToolbarFilterButton
• GridColumnsPanel
• GridToolbarQuickFilter

Expected behavior 🤔

Don't cause errors.

Steps to reproduce 🕹

1. Use an array for theme.spacing:

   const theme = createTheme({
   spacing: [2, 4, 8, 12, 16, 20]
   })

2. Render a DataGrid with toolbar, e.g.:

   <DataGrid
   autoHeight
   rows={[{ id: 1 }, { id: 2 }, { id: 3 }]}
   columns={[{ field: "id" }]}
   components={{
   Toolbar: () =>
     <GridToolbarContainer>
       <GridToolbarColumnsButton />
     </GridToolbarContainer>
   }}
   />

Context 🔦

We're using data grid with a columns selection button. The error in the console has caused some amount of bug searching until we figured out that the issue is not in our own code but in the library code.

Your environment 🌎

  System:
    OS: Linux …
  Binaries:
    …
  Browsers:
    …
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.87 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/material: ^5.8.6 => 5.8.6 
    @mui/private-theming:  5.8.6 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.6 
    @mui/types:  7.1.4 
    @mui/utils:  5.8.6 
    @mui/x-data-grid: ^5.12.3 => 5.12.3 
    @mui/x-date-pickers: ^5.0.0-alpha.7 => 5.0.0-alpha.7 
    @types/react: ^18.0.14 => 18.0.14 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.7.4 => 4.7.4 

[m4theushw]

Thanks for opening this issue. We'll keep an eye on https://github.com/mui/material-ui/issues/29677 to see which solution will be adopted.

[OpenSky1988]

I'm facing this exact issue when using GridToolbar. It seems like it is related to GridToolbarContainer. Any progress on this?

[mohamine18]

I'm facing this exact issue as well

[CyanoFresh]

started reproducing after upgrade to v7

[seksplus]

Getting the same error message with @mui/material version ^5.15.15

MUI: The theme.spacing array type cannot be combined with non integer values.You should either use an integer value that can be used as index, or define the theme.spacing as a number.

[guicara]

Hello, Any progress on this issue?

[mxreloaded]

Same error on some x-charts components like BarChart, though the workaround from https://github.com/mui/material-ui/issues/29677 makes it usable.

[brunomgurgel]

Also facing this issue