[theme] TypeError: theme.spacing is not a function when using Chakra UI theme with Material UI theme & MUI X DataGrid

[LinKassem]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/create-next-app-example-forked-ktl63y?file=/pages/index.js:1,1

Steps:

1. follow this guide: https://mui.com/material-ui/guides/styled-engine/#using-with-chakra-ui to be able to use chakraui theme with mui theme.
2. Render component from '@mui/x-data-grid'; with checkboxSelection=true prop
3. Select one of the checkboxes

Current behavior 😯

I am getting 'typeError: theme.spacing is not a function'

Expected behavior 🤔

I should be able to select/unselect rows through the checkboxes normally

Context 🔦

I have an app where the main theme used is chakraui. On one page I want to use the material ui data grid component. & I tried theme scoping and it didn't show any errors or strange ui when the table was rendered however when I tried selecting a row using the check boxes I got the error "theme.spacing is not a fn".
I have seen that theme scoping was tacked in this issue: #25852 & I have implemented the solution stated in the docs but it is not working for my case.

Your environment 🌎

npx @mui/envinfo

```

• System:

• OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
  

• Binaries:

• Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
  

• Yarn: 1.22.19 - /usr/local/bin/yarn
  

• npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
  

• Browsers:

• Chrome: 113.0.5672.126
  

• npmPackages:

• @emotion/react: ^11.11.1 => 11.11.1 
  

• @emotion/styled: ^11.11.0 => 11.11.0 
  

• @mui/base:  5.0.0-beta.13 
  

• @mui/core-downloads-tracker:  5.14.7 
  

• @mui/material: ^5.14.0 => 5.14.7 
  

• @mui/private-theming:  5.14.7 
  

• @mui/styled-engine:  5.14.7 
  

• @mui/system:  5.14.7 
  

• @mui/types:  7.2.4 
  

• @mui/utils:  5.14.7 
  

• @mui/x-data-grid: ^6.12.0 => 6.12.1 
  

• @mui/x-date-pickers: ^6.10.0 => 6.12.1 
  

• @types/react:  18.2.21 
  

• react: ^18.2.0 => 18.2.0 
  

• react-dom: ^18.2.0 => 18.2.0 
  

• typescript:  5.2.2 
  

</details>

[ZeeshanTamboli]

I believe there's a bug. When I use a Material UI component like the Button, it functions correctly. The issue may be because certain components in the DataGrid module use the styled utility from the @mui/system library, as seen here and theme scoping isn't supported for styled from MUI System, unlike the styled utility imported from Material UI.

[coopslarhette]

edit: well after pouring over github/stackoverflow docs, "fixed" by adding spacing: () => 5, to the chakraTheme creation:

fonts: {
    heading: `'Inter', sans-serif`,
    body: `'Inter', sans-serif`,
},
spacing: () => 5,

previously:

currently having same issue when trying to render GridToolBar via

<DataGrid
    columns={columns}
    rows={rows}
    getRowId={(row) => row._id.$oid}
    slots={{
        toolbar: GridToolbar,
    }}
/>

theme creation looks like the following (I believe its correct

const chakraTheme = extendTheme({
    spacing: 4,
    colors: {
        brand: {
            50: '#f0e4ff',
            100: '#cbb2ff',
            200: '#a480ff',
            300: '#7a4dff',
            400: '#641bfe',
            500: '#5a01e5',
            600: '#5200b3',
            700: '#430081',
            800: '#2d004f',
            900: '#14001f',
        },
    },
    fonts: {
        heading: `'Inter', sans-serif`,
        body: `'Inter', sans-serif`,
    },
})

const muiTheme = createTheme({ spacing: 4 })

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
      <ChakraProvider theme={chakraTheme} resetCSS>
          {/* Do this sa we can use Chakra and MUI at the same time: https://github.com/mui/material-ui/issues/25852#issuecomment-1489000484 */}
          <MaterialThemeProvider theme={{ [THEME_ID]: muiTheme }}>
              <BrowserRouter>
                  <StyledEngineProvider injectFirst>
                      <App />
                  </StyledEngineProvider>
              </BrowserRouter>
          </MaterialThemeProvider>
      </ChakraProvider>
  </React.StrictMode>

[LinKassem]

edit: well after pouring over github/stackoverflow docs, "fixed" by adding spacing: () => 5, to the chakraTheme creation:

fonts: {
    heading: `'Inter', sans-serif`,
    body: `'Inter', sans-serif`,
},
spacing: () => 5,

previously:

currently having same issue when trying to render GridToolBar via

<DataGrid
    columns={columns}
    rows={rows}
    getRowId={(row) => row._id.$oid}
    slots={{
        toolbar: GridToolbar,
    }}
/>

theme creation looks like the following (I believe its correct

const chakraTheme = extendTheme({
    spacing: 4,
    colors: {
        brand: {
            50: '#f0e4ff',
            100: '#cbb2ff',
            200: '#a480ff',
            300: '#7a4dff',
            400: '#641bfe',
            500: '#5a01e5',
            600: '#5200b3',
            700: '#430081',
            800: '#2d004f',
            900: '#14001f',
        },
    },
    fonts: {
        heading: `'Inter', sans-serif`,
        body: `'Inter', sans-serif`,
    },
})

const muiTheme = createTheme({ spacing: 4 })

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
      <ChakraProvider theme={chakraTheme} resetCSS>
          {/* Do this sa we can use Chakra and MUI at the same time: https://github.com/mui/material-ui/issues/25852#issuecomment-1489000484 */}
          <MaterialThemeProvider theme={{ [THEME_ID]: muiTheme }}>
              <BrowserRouter>
                  <StyledEngineProvider injectFirst>
                      <App />
                  </StyledEngineProvider>
              </BrowserRouter>
          </MaterialThemeProvider>
      </ChakraProvider>
  </React.StrictMode>

Thanks @coopslarhette ! Maybe this fixed the issue when using GridToolbar but it did not fix it when using it with material ui component

[puneetkathar1]

Has anyone fixed this bug?

[BhNgan]

mui/mui-x#10484
i tried this, and it helped me fixes the problems.