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

[LinKassem]

Duplicates

• [X] I have searched the existing issues

Latest version

• [x] 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: https://github.com/mui/material-ui/issues/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 ```

[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?