DEV Community

loading...
Cover image for 6️⃣ Six Reasons to Use Material-UI for React

6️⃣ Six Reasons to Use Material-UI for React

kylehunter profile image Kyle Hunter ・4 min read

If you have stumbled out of the gate when starting a new project or have thought about finding a component library for React, let me introduce you to Material-UI!

I have worked with Material-UI for a few years now and it has been a huge help in many ways. Here's six reasons why I think you will love it!

1️⃣ Start off with a large library of components

This reason alone has me recommending Material-UI to those looking to start a new React project. This is especially helpful if you're working under a strict time constraint and can't spend time building each component from the ground up. Having the ability to install the package and then have access to usable components from an App Bar to Drawers without any effort makes this library incredibly powerful. There have been many times I have come up with a high level design concept and quickly used Material-UI to throw together a working prototype in little time which to me is a huge selling point.

2️⃣ Aligns with Material Design by Google

As the name suggests, Material-UI aligns with Material Design by Google out of the box. Because of this, you are given a library of components that will probably look and feel familiar to your user base. This allows you to get started working with the library quickly while spending minimal time styling components and tinkering with CSS. With Material Design, you're given a full design system that describes the intent of the many available components and examples for how they should be utilized throughout your design.

Not only are you given a library already aligning with Material Design, but you're given access to the Material Icons as well. This means a uniform set of icons to choose from that match the design system being used. Additionally, there's support for a growing collection of even more Material Design icons in a separate package called Material Design Icons!

3️⃣ Access to a fully customizable theme

The nice thing about using a fully connected component library? You are given a customizable theme that can be accessed globally throughout your components. The theme gives you access to specify the color of components, surface properties (such as elevation and light/dark mode), palette information, etc.

All of this means that you can provide greater consistency among the many components you use throughout your design. The possibilities of how you style components and the interface really is endless. There's a TON to unpack here, so I suggest checking out their theming page!

4️⃣ Extensive support for issues and bugs

This is one point that I have really enjoyed about using Material-UI. The library is regularly updated with bug fixes and additional features. Since my introduction to using the library, the team has released new major versions once per calendar year packed with new features and components. Additionally, throughout the year there are minor releases packed with bug fixes and additional features for their component libraries. Their releases are all well documented and the history of the releases is available on their site. This means that you don't have to worry about being left behind if you opt to wait on updating your packages.

Another cool aspect of working with Material-UI is the "lab". The lab is a separate package where the Material-UI team can release new components for developers to use and test out without breaking the core package. This allows developers to use the new components and provide feedback to the maintainers.

5️⃣ Regularly updated library

With the regularly updated library comes great support for issues and bugs from the Material-UI team. The team responds quickly to any issues and provides fixes in minor releases. This has been a huge plus for me while using the library.

Additionally, as a user you have influence on what could be introduced next to the library. On Twitter, the main account @MaterialUI asks for feedback on what users would like to be added to the library. Also, there is a yearly developer survey that is used to provide feedback to the maintainers on how users use the library and what could be improved!

6️⃣ Large community of users providing external support and examples

Another benefit of using Material-UI is that there is a large user base that provide additional support and examples. One of my favorite sites to visit for Material-UI inspiration is MUI Treasury. @siriwatknp has put together his own ecosystem of usable Material-UI components. This is super helpful for any inspiration you might have when trying to come up with a unique way to utilize Material-UI.

🚀 Enjoy!

Hopefully this helps you out if you have struggled with starting React projects from scratch or have been looking for a well supported React component library. Feel free to reach out to me in the comments or on Twitter (@kyleh919) with any questions you have!

Sources:

Discussion (9)

Collapse
tracker1 profile image
Michael J. Ryan

I've been developing web based applications since the mid 90s. React + Redux + Material-UI is by far the single best combination for development I have ever experienced bar none.

Something, something... cold, dead hands.

Collapse
sarathm09 profile image
sarathm09

I use material ui for all my projects except for one. The only problem I've seen is that the bubdle size is pretty big when using material ui, and that can be bad if you need to optimize your app performance.

Collapse
szabikr profile image
Szabi

Just started using MUI on a new project a few weeks ago and find the library a bit to verbose, end up with many MUI elements nested in each other. And also the unit testing with react-testing-library seemed a bit difficult, maybe I’m just too new to it.

Can you recommend sources which help to get better with testing and also in general?

Great article, thanks!

Collapse
nitinreddy3 profile image
Nitin Reddy • Edited

Yep agreed. Material ui is the defacto UI system to be used with React.

Collapse
miketalbot profile image
Mike Talbot

The @material-ui/lab is also fantastic for getting early access to new functionality.

Collapse
kylehunter profile image
Kyle Hunter Author

Absolutely! It’s awesome to peek into what will soon be released and an opportunity to give some feedback on the components.

Collapse
pedromvgomes profile image
pedromvgomes

Was wondering, is it compatible with react native projects ? Is so much better than the libraries available for react native

Collapse
polyhistor profile image
Pouya (Edgar) Ataei

I'm telling you one thing for sure, neither the author nor the people who left a comment have any real exposure to enterprise level performance applications.

Because if you did have that exposure, you'll know that Material UI is verbose, so badly written, flawed, and sometimes even offensive. Specially with the way they add styled tags to the header.

Collapse
foresthoffman profile image
Forest Hoffman • Edited

Hello Pouya,

Your comment does not follow the community Code of Conduct which can be found here: dev.to/code-of-conduct. Please re-read the Code of Conduct before commenting or posting again.

You're obviously very passionate about Material UI and its flaws. While it is acceptable to point out the flaws in the subject of the post, it is not acceptable to provide no constructive criticism or information to backup your claims. It is not acceptable to speak down to an author or other users for discussing a piece of technology that they have found interesting or useful. Everyone's toolbox is different, and everyone's project is different.

If you want to warn others of the technical debt that you've encountered when using Material UI, then I encourage you to write an article describing your own experiences.

Cheers,
FH

Forem Open with the Forem app