Working with Material UI

Why should you start with Material-UI? Well for one it was created by Google and is regularly updated and improved for the use of developers. It’s a large CSS library that gives you component based jsx tags that allow for simple and professional designs alike. With all of this said, Material UI is derived from a base CSS library that Google manages called Material Design. What is this exactly?

Material Design (codenamed Quantum Paper) is a design language that Google developed in 2014. Expanding on the “card” motifs that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

Installing and using Material UI is very simple. It itself is a npm(node package manager) package and can be saved into your react apps package.json file. To save it into your package.json file run the following code in your terminal:

Now that this has been installed and saved into your app, you’ll want to require it in a given file you’ll be using components in. So now you’ll want to import given components you’ll need to use the proper stylesheets. Let’s look at an example:

Now that we know how to implement Material UI. Let’s look at some examples to see what we can do with it now.

There are so many components and variations to the components that you can implement into your app from Material UI but we’re only gonna share a couple today.

One fairly powerful component that can be used is the drawer component. When used, it can be similar to a navbar and can direct users to different parts of the app while also staying out of the way. While the Implementation may be a little bit harder than some others, you can end up with something like this:

Another example of something useful for most apps and sites is the use of a stepper. A stepper allows for you to have a user finish a sequence of events to get to a particular page or get a particular outcome. Say you want a user to create a login and then verify there email, etc. Then they can login to the site once they’ve finished all of the necessary steps. This is where a stepper would come in handy. Let’s look at an example of one.

See this was a lot of set up but when it’s all said and done, you get a beautiful example like this:

Now there are many more examples that I could show but ultimately you’ll just have to tinker around with it yourself. Material UI is very well put together and Google has great documentation on all of their components. I hope you enjoyed and if you’re interested here’s a link to the documentation.

Related posts:

We are honored to be a part of an unique business platform that focuses on conveying and delivering business, entrepreneurship and inspirational stories. At the Hong Kong Most Valuable Corporate…

In what resembled the death of the last embers in the blackened pit, sunrise fought the trained and majestic darkness. The catching rays of light splashed rocks, licked grass and warmed the…

Black Panther has made a huge splash in recent months as an excellent superhero movie that has spurred complex discussions of race, identity, and African culture. Interestingly, it seems to have…