Downsides of using two UI libraries in the same react project?

Question

I'm sure this is a bad idea for technical reasons but haven't found any source explaining if it is or why.

Let's say I'm building a React website and want to use two component frameworks, like ant.design and material-ui because I love 90% of what ant.design does but I just slightly prefer the modal dialogues in material-ui more and want to use those in conjunction with ant.design components.

They both seem to play quite nicely with each other.

Why is this a bad idea? Is there potential for conflict in future? Does this increase bloat somehow?

Answer 1

You may want to refer to this question asked yesterday for a little pointer:

How to make Bootstrap 3 and Ant Design 3 live together

As pointed out above:

• Bloat - the unnecessary inclusion of code you do not need, which can be avoided through custom builds.
• Duplication/Overwrite - code included by duplicate existing or merely serve to overwrite existing rules making the code 50% pointless.
• Conflict - issues may arise from conflicting JS code, not least from the potential to have conflicting version dependencies.
• Namespacing - as identified in the linked question, it is impossible to namespace the antd css to avoid collision with bootstrap.
• Code Styles - No two libraries will be implemented in exactly the same way and you will find yourself having to navigate issues that arise from this.

In my own experience I have never found a single library/suite that delivers everything, but the closest I have found to this is Ant Design.

Visually it may not be the best, and there may be implementation/pattern issues that some developers do not like, but the reality is that the less you have to build, the quicker you can deliver, and end users will care more for functionality than they will the way your app looks. The priorities you place on these things will differ from them for sure.

I personally love the look of Material UI and others, as highlighted here:

https://hackernoon.com/23-best-react-ui-component-libraries-and-frameworks-250a81b2ac42

But the reality is, you need to look to which single framework and set of components provides the best and most complete functionality you actually require.

In my case, as mentioned, this was Ant Design; being the only one with a strong set of UI components including Date Pickers etc, without having to add more and more components into my codebase via NPM.