React - Material UI vs Reactstrap

Question

I'm going to start a react project. I want a little clarification about the choice of Material UI over Reactstrap. Material UI is better than Bootstrap as mentioned in another comparison of Bootstrap vs Material UI for React?. But I'm a little confused about Reactstrap after going through Pros & Cons of Material UI and Reactstrap as shown in the below images. Or should I use both of them as per requirement in the same project?

I would like to use ready made UI components like Collapse-able Side Menu, Tables with pagination, Auto complete Select etc.

Answer 1

react-bootstrap is more popular than reactstrap. I will speak about react-bootstrap and Material UI.

I have more experience with Material UI. I don't even know how Material UI became that popular while it was very bad when it was released. It used inline styling and it was a nightmare to customize anything. Its performance was very poor. Still, it became very popular and it improved a lot. I used it in my latest project and the performance was great and I used its new CSS in JS solution combined with styled-components. I think it will be a bit harder to use than react-bootstrap but it has more components out of the box.

For most people, react-bootstrap would be an easier choice.

I can't tell you which one to use but I can give you some things to think about and decide yourself:

1. Which design do you prefer?
2. If you have more experience with bootstrap, go with react-bootstrap.
3. If you prefer sass go with react-bootstrap. If you prefer CSS in JS go with Material UI.
4. If react-bootstrap is missing some components you would need that exists in Material UI go with Material UI but remember that you can add other external components to your project anyway so I think this may not be a limitation.

Answer 2

It depends on your choices, yes, it's a little bit of complicated to customized material, but the looks and feels is outstanding, for tables and all, better to use Material-UI it has inbuilt pagination if you are not comfortable in that you can try this one it also comes inbuilt pagination and much more https://github.com/react-bootstrap-table/react-bootstrap-table2

Answer 3

I agree with comments about the cons referred in your question seems to be more opinions than facts; probably the only fact we can say after compare the two packages is that Material UI has some more built in components.

Once said that it's hard to take a decision without knowing the specification of your project.

Probably the best suggestion we can give you is simply use the one you are more comfortable with.

Hope this helps.

Answer 4

Refer to my experience, if it is an commerial/external project that needs minimal branding, and you are looking for basic reuse-able component to create Admin Portal or CMS, I prefer reactstrap/CoreUI. My main concern is Theme Overriding.

1. Not enough documentation about overriding material ui style, had quite a hard time to edit and test the theme setting again and again, while reactstrap/CoreUI allow you to import your own .css file, or overriding its class css. So you can simply change the textfield padding at once in css while your designer request to.

2. Neither material ui and reactstrap/CoreUI can fulfil your need. You may install other useful npm like react-select, multiple datetime picker, autosize textarea, or color picker. Then you try to make its style to be consistent as other Textfield. Styling a component like material ui is quite hard because of its behavior, e.g. label zoom out while focus. But Styling like reactstrap/CoreUI is much easier, you can even reuse the bootstrap classname.

If you are trying to deliver something fast & small without designer, material ui is a good choice, cover most of your use cases. If it is a long-term project and designer is watching you, I am afraid material ui is not a good choice.

Anyway, case by case.