Styling with Material UI
Material UI is an open source component library React UI framework that implements Google’s Material Design developed in 2014. It includes many pre-built customizable components which reduces the need for any single developer to create their own. It is pretty neat and saves a lot of time in regards to styling. As someone who first started using MUI recently, I can say it can be a bit overwhelming since it has a lot of information to comb over, but once you get a hang of it, it can be quite helpful in implementing features on your frontend. In this article, I will be going over how to apply some basic components of the MUI library.
First things first…
The most important step is installation! To install Material UI, run this command in the terminal:
npm install @mui/material @emotion/react @emotion/styledAmazing. With full access, it is time to explore the wonderful components of the MUI library. Let’s start with the most common feature that everyone uses. Guessed it? That’s right:
Buttons
A button is an input component which allows users to make an action with a single click. They can be placed practically anywhere to allow user interaction. In your code, simply plug in the <Button> component and add customizable attributes in the opening tag as shown below!
Best part about this is that it works almost the same as a button tag in HTML! Just add your onClick handlers the same way you would before and you will have a fully functional button with clean styling.
Card
Wondering how to focus some content about a single subject? A card is a surface component which localizes content onto a card-like surface. Check out this example:
It displays information about a specific item or subject all within one card! You can even add buttons and other features in the card! To do so, just import the wanted components from the MUI library and nest them within the <Card></Card> component! The Card comes in handy when you are looking to display data in a clean and focused way.
Dialog
Ever need a pop-up to display important information or to request information? Look no further because the Dialog is a feedback component that provides additional details or actions about an item. The dialog component freezes the surrounding app environment, and focuses on the content within the dialog. The example below is a dialog implementation for a project I had completed in a bootcamp.
I had implemented this Dialog to pop up when a user tries to make a same reservation on a boardgame which was already reserved by them. The code below shows how the Dialog was added.
To add a Dialog to your next project, you need to add the <Dialog></Dialog> component and set an attribute with a state value that is triggered when an action such as a click, occurs. The example shown is just a text pop-up, but other actions can be added like selecting items, completing a form, etc. Overall, it is a really cool feature to implement!
Material Icons
As developers, it’s nice to make the UI feel a bit fun. Using icons can accomplish this goal! Replace a delete button with a trash can or a like button with a heart; these are all small changes that can dramatically change the UX. There are over 2000 available material icons which can be used through MUI. 2000+?!?! Yup, that’s quite a lot. To access the plethora of material icons, we first have to install the npm package by running the command:
npm install @mui/icons-materialTo use any of the material icons, navigate to MUI’s website to see which icons they have available in their library which you want to integrate. For this example, I am showing la basura; that’s right, trash.
It’s as easy as copying the code from the icon you want to select and importing it into the component that you wish to use it in. At this point, just like with any other component, add the component into your code where you want it to go, like so <DeleteSharpIcon/>. It is customizable by adding attributes within the component tag. And that’s how you implement the material icons!
Since you got all the way here while reading, I’m guessing you’re looking to implement something a little more complex. Let’s explore the:
Date and Time Picker
I’ll be honest, it was a bit tricky attempting to first implement the date and time picker. But looking at the gif below, who wouldn’t want to implement this sweet trick.
The feature itself is so neat, essentially opening up a dialog for a user to select a specific date on a calendar, and then a specific time on a clock. The example in the gif has the date and time picker nested within a dialog. Let’s take a look at the code beneath the gif:
The date and time picker itself is all the code within the Localization Provider component. The localization provider is important because it changes the date engine locale that is used to render the pickers; however, default is English(United States).
To set up the date time picker, first run the following code in the CLI
npm install @mui/x-date-pickersThen install one of the four supported date libraries, and set the dateAdapter prop of the LocalizationProvider like the example below.
Once you have that complete, just set the value of the <DateTimePicker/> to state and apply a handler to track the changes of each change in the picker. Essentially, MUI does provide most of the code required, so it is really just refactoring the code to your needs.
These are just a few of the many components that MUI’s library offers. Something I love about Material-UI is how easy it is to navigate and read their documentation. They present plenty of excellent examples in a very clean and clear format. Interactive examples and code samples are available for whatever feature you are looking for! I would highly recommend diving into the official documentation if you are looking to implement MUI in your next project. Good luck!
