AmberJWhether you go gaga for Material Design or gag looking at it, the "card" or "paper" concept with a focus on surfaces and edges continues to be a popular and broadly applied application style.
Material-UI, the React component library based on Google Material Design, allows for faster and easier stylized web development. With basic React framework familiarity, you can build a deliciously material app with Material-UI, and its almost like cheating. Almost.
This MIT-licensed open source project is more than just parlor tricks though and can get deep quickly. But don't let me scare you! I recently built an app with Material-UI for the first time, and by the end I was delighted. Here are 5 things I appreciated about Material-UI:
1. It's well documented
The official documentation is organized and easily navigable. The library's popularity means you have access to tons of code examples on the web if the documentation is confusing. You can also head over to StackOverflow for technical Q&A from Material-UI devs and the core team.
2. Regular updates
With the recent release of Material-UI v4 (May of 2019) and blog posts with new features and future goals posted monthly, Material-UI doesn't look like its dying down anytime soon. Along with feature updates and improvements, here are the GitHub stats from the latest blog posted November 8th:
We have accepted 182 commits from 68 different contributors. We have changed 1,157 files with 31,312 additions and 9,771 deletions.
Cheers to that! 🙌🙌🙌
3. Consistent appearance
Okay, this is kind of cheating because its a library, so of course the appearance is going to be consistent. BUT Material-UI is a HUGE library, and the benefit is you have some choices.
Aesthetic preferences for Material Design aside, your web project has a high chance of retaining similarity in appearance and functions all throughout.
4. Creative freedom
You don't have to have a consistent appearance if you don't want to!
I know, I know - I just said that it creates a consistent appearance, but that's out of the box. As I hinted at earlier, there is actually quite a lot of depth to the Material-UI components and the developers encourage customization. Material-UI doesn't force Material Design style on you, it just offers it.
One delightful component was the ThemeProvider. Placed at the root of your app, you can change the colors, the typography and much more of all sub-Material-UI components! However, this is optional; Material-UI components come with a default theme. Code magic.
5. Components work in isolation
Material-UI components are self-supporting, and will only inject the styles they need to display. They don't rely on any global style-sheets such as normalize.css! You only want to use that super cool progress spinner? Grab it! Live your best life!
So there you have it! Go try it on for size if you haven't already.
There are some great resources for starting projects on the official website.
If you have played around with Material-UI or its part of your regular build, let me know what you liked or what surprised you!
