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