Search code examples
reactjsmaterial-uichakra-ui

can't use MUI components with chakra


im using chakra ui for my whole project but it doesn't seem that chakra has a datepicker component so i'm trying to use Material's but when it does not seem to work only if i remove the ChakraProvider in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';

ReactDOM.render(
    <React.StrictMode>
        <ChakraProvider>
            <App />
        </ChakraProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Solution

  • Based on my experience, I would advise against using two frameworks in one project. Recently, I faced an identical problem. I also wanted to use a component from MUI and asked a question in the forum, getting the following answer.

    IMO it depends on your project configuration (webpack, for example) if you are doing proper tree shaking, as the productions only get what you use, the downside is for sure that node_modules swells up and it swells a lot.

    I decided to use a library which uses date-fns react-date-range . Imprementation was very simple and hassle free. If you only need a datepicker, I recommend this library: react-datepicker