Exploring React and Material Design


Spent a lot of today looking over open source projects that contain React components already styled to work with Google’s Material Design. I’m not a huge fan of the flat look, but I hesitate to always reach for Bootstrap and figured on trying something a little new.

I came across three contenders: React Toolbox, MUI, and Material-UI.

I was most taken with MUI – it was very clean, and felt very light. But though Datepicker and Card components are on the roadmap, they’re not available yet.

Material-UI is really nice, but I saw that the current version inlines all styles per component. In addition to some performance issues, overriding the styles would require a lot of !important usage that I’d rather avoid. There’s also a lack of any grid/layout system.

That is… until I went digging around and found some discussion about the next branch of the project. Which changes the approach to styling, and also contains an approach for layout. Score!

As I updated my project to work with the latest branch, I found myself puzzling over a documentation link that was posted that seemed a bit out of date.

I kept getting an error when trying to use a the Paper component, saying that the zDepth prop was not defined. Doing a bit more searching, I saw that this was a known issue, and the prop had been renamed to “elevation.”

I had this incredible headdesk moment where I realized I was referencing an outdated bit of documentation online for an in-development branch of a project.

So I ended up cloning the repo, and running the documentation locally… and you know what? It was there. Part of the risks when trying to work with something that’s not quite official yet.

Of course, now that I’ve gotten a few example components working with Material-UI, I’m now giving React Toolbox another look. I ran into some installation issues related to webpack (which always feels like a PITA to set up), and moved on. But maybe it’s worth another look.

Related:
Slowly, Surely

This Post Has 0 Comments

Leave A Reply