MUI Component vs React Bootstrap

Question

I'm developing an app using react js. I just want to ask your opinion. Is it redundant to use MUI Component and React Bootstrap at the same time?

Answer 1

Usually you pick one widgets library, but if you miss some components you can mix them too. According to mui documentation every component is self contained:

https://mui.com/material-ui/getting-started/usage/

If you are worried about inconsistencies in your widgets, mui now offers unstyled components as a standalone package:

https://mui.com/base/getting-started/overview/

For react-bootstrap the components can be customized in many ways, especially over global customization via sass variables:

https://react-bootstrap.github.io/getting-started/introduction/#installation

I wouldn't worry too much about dependencies as you usually have so many of them anyway and install new package for every use case.

In my current project for example I have react-bootstrap as the main UI-lib, but it has no date pickers nativly. So after a research I picked up the mui datepickers.

Answer 2

No, it's not redundant for your project. The amount of work that's been put into Material UI makes it a feasible choice for professional projects.

Also, if you are worried about libraries taking more bundle size then as per the Material UI documentation, you can reduce bundle size by importing your components in the following way: let's say you want the button component, so you import it like this import Button from '@material-ui/core/Button', instead of this import { Button } from '@material-ui/core'. With the former import you'll be importing the Button module only and leaving the rest of the modules alone. For further detail, visit this link: https://v3.material-ui.com/guides/minimizing-bundle-size/.

Hope you find this answer satisfactory!

Answer 3

I think both libraries are great, but generally the approach is to pick one to keep less dependencies in your package.json file. You have to keep single approach when it comes to styling for two reasons:

• Consistency
• Whoever reads your codebase will be able to comprehend easily.

P.S: I prefer MUI, you can customize your own design system by overriding MUI default theme

Answer 4

There's nothing stopping you from using both MUI and Bootstrap in your project but either one should be able to meet all your design requirements.

But in choosing both you would have to keep in mind two very different approaches to design. The MUI implementation varies quite a bit from React Bootstrap. Not sure what you are going for here, but in a very general sense I would stick with one for my project/purpose.

(Personally I prefer MUI)