Software systems to innovate and grow

React + Material UI Design – Why and How to Pick Material UI for React Apps

By Engineering Team August 4, 2017 10 mins read

Why should you consider using React with Material UI? Well, Google’s Material Design has taken over the internet and you might be considering adding it to your next project…

Should you?

In this article, we’re going to focus on React and Material design. We’re going to talk about –

  1. The basics of Material Design?
  2. Should you add Material Design to your React project?
  3. The best Material Design libraries you can use with React.

We’ve got a demo with 3 Material UI design libraries. Read on…

Quick Introduction to Material UI Design

Here’s what Google says about the goals of Material UI Design –

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

They wanted to create a design system that looks good and feels great. That’s what they mean by possibility of technology and science.

As always, Google wants to make their users happier.

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

They also want to use the design system across various devices and use different kinds of inputs.

They want to reduce the difference between interacting with real objects and virtual objects.

Principles

There are 3 principles Google talks about on their official Material Design page.

I’m going to make this easy to digest. It’s more important to understand the concepts rather than kinda understand the lingo.

1. MaterialUI is a Metaphor

Material refers to the components in the Material design system. Google wants to make material as close to reality as possible. Designers at Google have spent a lot of time studying light, surface, and movement.

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

2. Bold, Graphic, Intentional

Have you noticed the extensive use of bold colors and fonts in so many new websites?

That’s for a reason.

The bold graphics and colors show the hierarchy of information. They guide the user’s eyes through the page.

3. Motion Provides Meaning

Animations aren’t what they used to be – another feature.

In Material Design, animations serve a purpose – continuity. The smooth transitions bring different sections of your app together.

Here’s an example of everything we mentioned above.

As you go through the example you can see how the animations give context to the whole application. It also illustrates the other principles discussed above.

Should I Use React and Material Design?

As developers, we tend to get too tied up with new technologies and buzzwords. We add new libraries before thinking about their relevance in our projects.

Before we can answer the question above, let me ask you this question…

What does Material Design mean to you?

Is Material Design the latest trend that you want on your website?

Or maybe you want to use Material Design to give your brand a face lift?

Maybe you’re building a new website and you want it to look Material pretty.

Whatever your reason may be, I cannot say if it’s right or wrong. What I can do is offer you a perspective.

Why You Shouldn’t Use Material Design

You shouldn’t use Material Design if you’re trying to keep up with the latest trend. Trends keep changing and your users probably care about other things more.

If you’re trying to redesign your brand, Material Design isn’t going to be enough. Do you want your brand to look like hundreds of other websites on the internet?

To summarize – if you’re trying to reinvent yourself with Material Design, think twice. It’s not an instruction manual to create brands.

Why You Should Use Material Design

If you recognize that Material Design is more than a cookie cutter for websites, we’re on the same page.

Material Design can give you guidelines to make better, more tactile user interfaces. It can inspire your designers to think about the hierarchy of information.

To summarize – if you’re using Material Design as a starting point to design better user interfaces, do it!

P.S. It’s not a bad idea to use a Material Design library for prototypes of your product. You can use it like you’d use any other CSS library (Bootstrap).

Integrating Material Design into Your React Application

You could build your own CSS library to implements Google’s Material Design spec.

Or you could use one of the many libraries out there.

Unless you’ve got a large team and a lot of time, building your own library might not be the best idea.

Let’s look at how you can add Material Design to your application.

Demo App – React and Material Design

We wanted to let you play with a few of the Material Design libraries out there.

We picked three libraries that we found interesting –

  1. material-ui
  2. react-md
  3. materialize

More on these later…

For now, you can download the code and play around with the three different libraries.

Download and Run Demo Application

Note: If you aren’t using yarn, you can run all those commands with npm.

Now you can play around with the code in the containers directory.

You’ll know more about the library you’re dealing with once you read further in the article.

Switching to Different Branches

There are three branches for you to look at –

  1. material-ui
  2. materialize
  3. react-md

To switch between these branches…

You don’t need to use the --track flag once you’ve checked out the repository the first time.

Don’t forget to install the dependencies every time you switch the branch.

Integrating the Library

There’s more than one way to skin this cat.

1. Using a CSS Library

Here would have to create our own wrappers for the component. That means that the library gives us a boost with the CSS.

You can see our implementation of MaterializeCSS in the demo application.

This approach gives us access to a lot more libraries. But now we’re in charge of writing the React components for our application.

Using a CSS library also makes it easier to customize our components. We have direct access to the component and its props and methods.

2. Using a React Component Library

This means that we’d use a library that has pre built React components. The library takes care of the styling and the React bit.

You can checkout the material-ui or react-md for an example of using this approach.

Working with pre built React components is much faster but has its own issues. You’re now depending on this library for functionality and style of your component.

Depending on the library, customization may become a challenge.

The Verdict

If you’re using a library for a style boost and want more flexibility with your components, use a CSS library.

If you want to build the application faster, using a component library is a better idea.

Note: You may find React wrappers for many of the CSS libraries. Make sure they’re popular, well maintained or come from a good / trusted developer.

Our Favorite Material Design Libraries

There are so many great Material Design libraries out there! More than we can cover in this article.

This is a starting point for you to explore some of the amazing libraries out there.

We’ve split this list into CSS libraries and component libraries.

CSS Libraries

MaterializeCSS

MaterializeCSS is no doubt a great library to work with. With almost 30,000 stars on GitHub, MaterializeCSS stands out on any list.

The library has great documentation and is easy to use. The Materialize team recently introduced themes as well.

Materialize is quite out of the box with its design components. Customization can be a bit of challenge, but nothing more than any other ready to use CSS library.

As of this writing, Materialize has two dependencies including jQuery. So it’s not exactly a lightweight library.

Note: When using any non React libraries with external dependencies, configuration is key. You may need to expose jQuery (or another library) to the global scope. For an example, checkout the materialize branch in the demo code above. We’ve added a CDN script to import jQuery.

MaterializeCSS

Material Design Components for Web

This library is the successor of Google’s Material Design Lite. It has components for Android and iOS. This can be a major plus for companies that want to use a similar design on these mobile platforms.

The documentation boasts its production-ready; pick, plug and play nature. It also talk about it’s seamless integration with other JS libraries.

This library comes across as a lot more customizable with its SASS imports.

This library seems to be a good choice for a higher level of customization. You can use the variables that define the cubic bezier for Material animations. Or you can use ready-to-go components.

Material Design Components for Web

Surface

This library didn’t have a direct link to its GitHub page, but you can see it here.

It’s not the most popular library, but it makes some impressive claims on its documentation page. Weighing in at 5.7kb, this library does not use any JavaScript.

That’s like the many JavaScript optional components in Material Design Components for Web. Definitely worth looking at.

Surface

Material Foundation

This library isn’t the most popular library out there – around 350 stars on GitHub. Yet, its mention worthwhile for Foundation users.

This isn’t a library we recommend unless you’re already using Zurb’s Foundation.

Material Foundation

React Component Libraries

Material UI

With 27,658 Stars (as of this moment), this library definitely catches our attention.

It comes with two themes out of the box with the option for customizing your design further. The material-ui example in the demo code with this article has a theme switch button too!

The library is easy to use and has a nice feel. Don’t forget to check this one out.

MaterialUI

React Toolbox

Another solid framework. Some developers prefer this over Material UI.

6,500 stars, an active community makes this library a front runner in our list.

React Toolbox

MUICSS

MUICSS is light. In fact, it has no external dependencies. That’s a big plus if you’re concerned about page weight. It also has a standalone CSS only version.

MUI uses the same grid system as Bootstrap. That’s a major plus for developers who are coming from the Bootstrap world.

With 3,500 stars on GitHub, MUICSS is a solid choice. If you’re looking for a fast, lightweight library for your next project, check it out.

MUICSS

react-md

react-md comes across as a bit of an underdog compared to the material-ui.

Yet, it’s documentation is good and it’s definitely worth playing with. You checkout the react-md branch in the demo app to see it in action!

react-md

react-mdl

DO NOT USE THIS LIBRARY!

You may see this library recommended in other articles, but it’s deprecated.

react-mdl

Conclusion

It’s time to go out and play with the many CSS and React component libraries we mentioned.

We recommend that you keep your brand and identity in mind. You can use Material Design as a guideline to improve your UI. Don’t treat this like another buzzword integration. We don’t want a hard time differentiating our website from the 1000’s out there. If you are still considering Angular, you might want to check out Covalent UI he is a podcast we recorded with one of Covalent’s main author Kyle Ledbetter Director of User Experience at Teradata.

If you’d like to see what other developers are saying about using Material Design with React, see this post on Reddit.

Good luck!