how to use chakra provider and material UI together in React JS?

We are working on project of clone of flipkart.com.We are working on team.so we have distributed our works. One of guy worked on landing page with material UI and i am working on product page with chakra ui but after merging app is not working and producing unfamiliar error.

So, provide some solution so we can make our presentation.

in index.js i have written this code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import FlipkartStore from './Components/Redux_Implementation/Store/Store';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';

const muiTheme = createTheme();
const theme = extendTheme();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={FlipkartStore}>
    <ChakraProvider theme={theme} >
    <ThemeProvider theme={muiTheme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
    </ChakraProvider>
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

reportWebVitals();

its showing this error

if am removing chakra provider page is working but my product page css is not working

Worked for me:

<ThemeProvider theme={muiTheme}>
  <ChakraProvider theme={chakraTheme}>
    ...
  </ChakraProvider>
</ThemeProvider>

You can wrap the ChakraProvider only for your page as needed.

If you are using React Router. You could wrap the provider only for your path.

Example:

<Switch>
  <Route path="/products">
    <ChakraProvider> /* 👈 wrap only for your products page */
      <Products />
    </ChakraProvider>
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Switch>

wrap your route inside ChakraProvider.

<Switch>
      <Route path='/your_path'>
           <ChakraProvider>
                <YourComponent />
           </ChakraProvider>
      </Route>
      <Route path ='/your_path_2' element={<YourOtherComponent />} />
</Switch>

Just wrap your route inside the route.

The component you want to use you can wrap it in chakra provider.

<Route path='/'>
   <ChakraProvider>
        <Component you want />
   </ChakraProvider>
 </Route>

<!-- end snippet -->

Basically the best way to use both chakra-ui and mui is to merge their provided theme and give both of their providers the same theme like this:

import "./styles.css";
import AutoComplete from "@material-ui/core/Autocomplete";
import TextField from "@material-ui/core/TextField";
import { ThemeProvider } from "@material-ui/core/styles";
import { deepmerge } from "@material-ui/utils";
import { createMuiTheme } from "@material-ui/core/styles";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";

const muiTheme = createMuiTheme();
const chakraTheme = extendTheme();

//the important part
const theme = deepmerge(chakraTheme, muiTheme);

console.log({ chakraTheme, muiTheme });

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <ChakraProvider theme={theme} resetCSS>
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <AutoComplete
            id="combo-box-demo"
            options={[{ title: "a" }, { title: "b" }, { title: "c" }]}
            getOptionLabel={(option) => option.title}
            renderInput={(params) => (
              <TextField {...params} label="Combo box" variant="outlined" />
            )}
          />
        </div>
      </ChakraProvider>
    </ThemeProvider>
  );
}