MUI React Examples. Find out if it’s a Good Fit for You.

Material UI is a popular library with a wide community. It is easily customizable, and modular, has informative documentation and it is easy to use. Why not give it a try in your next application, right?

The main aim of this article is to save your time and help you understand whether MUI is a good fit for you.

It will take you around 10 minutes to complete the reading of this article.

It’s divided into three parts:

What is MUI and when to use it?
Examples of using and customizing the built-in MUI components.
Example of using MUI styled engine and alternatives.

No prior experience with MUI is required in order to feel comfortable reading the article. It is good to have a basic understanding of HTML, CSS, and React though.

Ok, let’s begin!

What is MUI

Material UI is a React UI components library that implements Google’s Material Design (from the official website). You can learn more about Google’s Material Design principles on the official Material website.

Let me rephrase it and repeat it once again, MUI is a collection of React UI components that follows Google’s Material Design principles.

All the components that MUI exposes follow the design best practices so that your users can enjoy high-quality UX (User Experience) from the Google team.

When should you use MUI?

You might want to use MUI if you wish to include thoroughly tested and carefully crafted components into your app omitting reinvention of the wheel.

With MUI integrated into your app you can focus on your app’s business logic instead of creating all the UI components from scratch.

I mean for this purpose you could use an alternative components library like Chakra UI. So why use MUI?

For this reason, I am writing this article today. The article will let you see the code snippets that will show you how to use and customize MUI components. You will find out whether you like the tool and if you want to add it to your app.

I briefly touched on Chakra UI, but I want to stress that this is not a comparison article between MUI and Chakra. Both tools are good, but personally, I like MUI more due to its features related to components customization.

So let’s make a bottom line here.

It is a good idea to delegate the work of creating UI components to a library in order not to reinvent the wheel. MUI is a good candidate to make the job right.

MUI Grid Component Example

What is the grid layout and why you may want to use it in your app?

A separate article might be needed in order to answer this question. At the beginning of this section, I will share a few highlights from my experience to why might we want to use the grid layout.

A grid component allows us to think about our application layout in terms of rows and columns.

It allows us to put the layout components into a page without specifying additional CSS rules considering their location on the page. It’s an abstraction that helps us to work with layouts easier by omitting verbose styles for positioning, and it makes responsive design implementation unobtrusive and more intuitive.

If you are interested in this topic, please let me know and I will work on an article that will cover grids in more depth (see the contacts in the header).

In the meantime, let’s continue working with MUI components.

Let’s see how to use MUI Grid in the application.

The example above is rather simple. I created a separate page and wrapped the contents with the Container component. It allows us to cap the maximum width of the content on the page when it is rendered on a wide screen. Try opening the sandbox in Chrome Dev Tools with the responsive tool opened in order to see what I am talking about (don’t forget to choose the widest screen).

The grid definition is pretty easy as well. In order to create a grid layout, we use the Grid component and specify whether it’s a container or an item with the corresponding props.

Except for the basic item and container props you can also see the spacing and the xs prop.

The spacing prop tells MUI how much space should be between the columns and rows.

Each spacing unit takes 8px by default. It is customizable and we will take a look at how to customize this value in the following section. For now, let’s focus on the grid component.

So spacing={2} is basically telling us that there should be a 16px gap between the grid columns and rows.

xs is related to the responsive design implementation. It’s used in order to let MUI know how the grid should like on the devices with the extra small screen size.

xs is one of the breakpoints you can use to specify how the layout should look on screens of various sizes.

For example, let’s see an example that illustrates how to use the md prop when you need to specify how the layout should look on the devices with a medium screen size (600px by default in MUI). In the example below, two columns of equal size will be rendered for the medium-sized screens.

As you can see, when we change the viewport size, the layout changes based on the rules that we set with the xs and md props.

There are more breakpoints that you can use in order to make your app look exactly as you want it to be. Please, take a look at the official MUI docs to learn more about the breakpoints.

It smoothly takes us to the important concept that we will explore in the following section.

MUI Theme Customization

I get it, the topic sounds interesting and important, but what is a theme you might say?

The theme specifies the color of the components, the darkness of the surfaces, the level of shadow, the appropriate opacity of ink elements, etc. (from the official documentation).

In my opinion, the description is not complete, let me stress what I think is important.

Theming in MUI is incredibly flexible. If I needed to highlight one of the most strong arguments for choosing MUI I would consider choosing the theme flexibility point.

So when might you want to customize the MUI theme?

A good rule of thumb is to customize the theme each time you need to make a built-in MUI component look different. Try to do your best to stick to the theme customization when you want to update the styles of the built-int MUI components as it helps you keep all the customizations in one place and is well documented.

MUI also provides the ability to use emotion to customize the styles. It is a great tool and it does its job perfectly fine. However, if it’s a built-in MUI component you are trying to customize, try to customize the theme in order to style it. It allows us to keep the components folder leaner since we put all the styles related to the built-in components into a separate folder. Most of the time the folder is called theme.

A more in-depth guide to when to use the theme customization versus the emotion in your application is worth its own article. Let me know if you find it interesting (use the contact information in the header).

So what steps do you need to take in order to customize the MUI theme in your app?

Use the ThemeProvider
Use the createTheme helper

Let’s customize the breakpoints in our application using theme customization.

Please, focus on lines 4-12. We will get to the typography customization later in this article.

In the code above I updated the breakpoint values for the application. Let’s take a look at the md breakpoint as an example. The default value is 600, it means that once the viewport width reaches 600px the rules for the md breakpoint will be applied to the application.

In our case, though, I changed the value from 600 to 620. It means that now the md rules will be applied when the minimum viewport width is 620px.

You can check more details about breakpoints and breakpoints customization in the official MUI documentation.

Now let’s see how to customize spacing in the app.

Remember how we set a spacing={2} property on the grid component in the previous section of this article? If you can recall, each of the spacing units takes 8px by default.

We can adjust this value using the MUI theme customization as well.

const theme = createTheme({
  spacing: 4,
});

In the code above I am specifying that each spacing unit takes 4px instead of 8px.

Let’s get back to our grid component. If you haven’t read about it, please take a look at the previous section of this article.

The spacing={2} on the grid will now result in a 8px gap between the rows and columns. Not a 16px gap as per default configurations.

You can adjust parameters like breakpoints and spacing in order to make your application unique and consistent with the branding design you follow.

So let’s wrap the theme customization topic.

MUI theme is very flexible. Unfortunately, there is no chance to cover everything related to the theme customization topic in this article. If you are interested in learning about the topic in-depth, please, find more details about the MUI theme customization in the official documentation. It is a good starting point for your journey.

Now, let’s explore another fundamental MUI component that is being used in any application. Typography.

MUI Typography

Typography topic is quite broad one. In this article, we won’t touch on things like how to make the copy in your application look best in terms of readability and appearance.

Instead, we will see how to use the MUI Typography component and how to customize it to be consistent with your brand.

Let’s drop in some texts into the application.

In the code above I added all the variants of typography that are available to us by default.

Let’s take a closer look at what each of the props does when applied to the Typography component.

The most common one is a variant prop. We use it to specify what styles have to be applied for a particular copy in your app.

Each variant has its own font size, line height, font-weight, and other styling properties.

Except for the variant, you can also see a component prop. It is pretty self-explanatory. Using this prop you specify which component should actually be rendered in the DOM.

It is easy to confuse them, I know it from practical experience 😉 Just keep in mind that variant specifies which styles should be used. In contrast, the component prop tells which component should be used. It can be div, p, span or any other HTML element.

You can also see the gutterBottom complementary property. It is just used to give the text more space so it won’t look cluttered. After you add this prop, an additional margin will appear at the bottom of the text.

Now, let’s say the designers in your company shared artboards in Figma with you. You see that the font sizes are different between the designs and MUI Typography styles. What can you do about it?

We all know how much time and effort the design team puts into making the copy readable and appealing to our users. So let’s acknowledge their efforts and customize MUI to follow the typography rules that the design team shared with us.

Let’s get back to the MUI theme customization. If you haven’t read the previous section of the article about the MUI theme customization, it would be nice to get acquainted with it before you proceed to the next paragraph.

In order to adjust the stylings of the copy in the app, I will be using the MUI theme customization.

Typography customization rules start at line 13.

The next time we will use Typography components in the application, they will be rendered based on the styles we mentioned above.

Last, but not least. By default, MUI uses the Roboto font family. Be aware that it is not included by default in your application.

In order to add it, please use Google Fonts CDN as I do in the example below.

Above, I present to you the whole index.html file that is located in the public folder in my application. I did it so you could better understand where I put the code below.

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

After adding the line above you are all set and Roboto font is used as a default font in your app.

Now, the most curious ones would say: “That’s cool, but how can I use a custom font in my app?”.

I see two options for how can you add a custom font to your application:

Use a self-hosted font
Use Google Fonts

Let’s stick to a more popular and simple approach and use Google Fonts in order to add OpenSans font to our app. If you haven’t used Google Fonts before, it is completely free, try it on your own when you have time.

Remember how we added Roboto font to the app in the above paragraphs? Just swap the link with the OpenSans link that you copied on the Google Fonts website.

<!--
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
-->

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

Now, you’ve added the link to OpenSans font into your app, great! Let’s also have to instruct MUI to use it for your typography, so let’s do that.

// src/theme/theme.js

import { createTheme } from "@mui/material";

export default createTheme({
  ...,
  typography: {
    h1: {
      fontSize: 55,
      fontFamily: 'Open Sans',
    },
    h2: {
      fontSize: 50,
      fontFamily: 'Open Sans',
    },
    h3: {
      fontSize: 45,
      fontFamily: 'Open Sans',
    },
    h4: {
      fontSize: 40,
      fontFamily: 'Open Sans',
    },
    h5: {
      fontSize: 35,
      fontFamily: 'Open Sans',
    },
    h6: {
      fontSize: 30,
      fontFamily: 'Open Sans',
    }
});

By adding the fontFamily property I instruct MUI to use OpenSans as a go-to font for my Typography.

Instead of OpenSans, you can choose any font from the Google Fonts website and it will work just fine after you follow the instructions above.

Typography is one of the built-in components in MUI. It is highly customizable, modular, and fundamental to every application.

Alright. We have already seen how to work with the built-in MUI components, but have you already wondered how to create and style your own components?

If you’ve asked yourself how can I style my own components in MUI then you should definitely continue reading the next section.

How can you style your own components in MUI?

By now we already looked into how to use and style the built-in MUI components. It’s fundamental knowledge that you will definitely apply when you start a new project or drop in the MUI library into your existing codebase.

But at some point, you will customize all the built-in components to adhere to your branding rules and will start creating your own. For example, you will definitely want to compose a few components in order to create a new page.

In order to make some room on the page, you will need to set margins and paddings on your elements. Without further ado, I suggest creating a very simple page that will contain a few elements and I will show you how to style your components using MUI styled engine that uses emotion by default.

There is a bunch of components there isn’t it? Let me stress that we have created this page in order to see how to style our own components. For this reason, let’s focus on the PageExampleToolbar and the PageExampleContent as these are the only components that have custom styles on them.

In order to style the toolbar and the content of my page, I created a file PageExample.styled.js.

In the code above I use a styled helper from MUI. Under the hood, it uses emotion that lets us style our components.

Using emotion as a default styled engine for MUI is one of the options (there are others). Personally, I like using emotion. In contrast to the BEM methodology that we can stick to when using regular CSS, emotion is quite flexible. You shouldn’t come up with all the class names and spend time on them. Instead, you can just use a ternary operator directly in your styles and put a value for a specific CSS property based on an arbitrary prop.

If you are still interested in alternatives, please read the official MUI documentation that reveals recipes for adjusting the styled engine and component customization guidelines.

Conclusion

Congratulations, you’ve reached the end of the article.

Let’s sum up.

The aim of this article was to save your time and to help you understand whether MUI is a good fit for you.

I hope that I managed to help you with it by highlighting the three sections that we covered in this post:

What is MUI and when to use it?
Examples of using and customizing the built-in MUI components.
Example of using MUI styled engine and alternatives.

Let me briefly repeat myself:

MUI is a UI library that you might want to use to add high-quality and tested components to your app without spending time reinventing the wheel.

In the article, we have seen the usages of the MUI Grid and Typography components. We customized them using MUI theme customization and briefly took a look at the most basic props the components receive.

We also covered customization of our own components using the default MUI style engine – emotion. We’ve also seen that there are alternatives to using the emotion library in order to style your components.

If I needed to highlight a single takeaway from this article, I would choose this one:

Use the MUI theme to customize built-in components as it’s flexible and lets you keep all your customizations in a single place.

Thank you for reading.

If you liked the article, please consider sharing it with your colleagues and friends. It will help me attract more people to the blog and will positively impact my motivation to deliver my work to a broader audience.