How to Use Material UI

In software development, the concept of “frameworks having frameworks” is fascinating. For instance, some frameworks make working with languages like JavaScript easier. Examples of some of these frameworks are; React, Angular, and NextJS.

“Layering” is the term that explains what we mean by frameworks having a framework. It is possible to nest frameworks to increase productivity or use features that have not been provided by a particular framework.

An instance of layering is the ReactJS library for JavaScript which works with another framework called material UI. Material UI is a framework built specifically for ReactJS, and it provides ready-to-use components that adhere to Google's material design principles.

In this article, we’ll get to understand material UI and how it can be integrated into React Projects.

According to the official website, Material UI is an open-source React component library that implements Google's Material Design.

Google develops material design, which includes guidelines for shapes, icons, colors, typography, shadows, and more. MUI is the React.js library that implements these Material Design guidelines.

MUI includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box and features a suite of customization options that make it easy to implement your custom design system on top of the components.

Material UI is a prebuilt component that can be used to build applications faster - it’s similar to Bootstrap which is a CSS library, but it’s specific for React and provides React components that can be incorporated into projects that handle not just the style of the component but the actual functionality as well.

Some of the prebuilt components include;

• Buttons
• Slider components
• Badge
• Navbar
• Icons
• Inputs
• Forms

Benefits of Material UI

• Customization and Themes

Material-UI provides customization and theming options for developers. Developers can change colors, typography, and design elements using custom themes.

• Pre-built Components

Pre-built components of Material UI are its biggest advantages as it provides ready-to-use components like cards, input, buttons, etc. to aid in faster development, allowing developers to focus more on the essential functionalities.

• Responsive and Mobile-Friendly Design

Material UI components are built to be responsive and mobile-friendly. The components adapt or automatically adjust to different screen sizes and devices; providing a consistent experience for users across desktop, tablet, and smartphone devices. This means that developers do not need to create different layouts for various devices.

• Localization and Internationalization Support

Material UI supports localization and internationalization, making it easy to support multiple languages and regions in applications.

These built-in tools and components allow developers to add translations that can be adjusted based on the user's language or region, allowing businesses to reach a global audience or users around the world.

• Accessibility and Usability Features

Material UI follows accessibility guidelines and best practices which is one of its core purposes. It ensures that components are accessible to users with disabilities by providing features such as keyboard navigation, proper labeling, and ARIA attributes (Accessible Rich Internet Applications).

Note: ARIA attributes are special codes added to HTML to make web components accessible to people living with disabilities - this helps screen readers or other assistive technologies understand the content on the web page.

• Design Tools Integration

Material UI components can be integrated into design tools like Figma, AdobeXD, and Sketch. This makes the design consistent with the design that would be used during development

• Cross-Browser Compatibility

Cross-browser compatibility is handled by React and Material UI to enable consistency across various browsers. This means that developers do not have to write browser-specific code during development that targets each different browser, saving time and ensuring faster development.

• Large Ecosystem with Community Support

Material UI is a popular React component library with a strong community of developers that contribute frequently to improve its functionality.

The large ecosystem which includes documentation/ resources, third-party support, and a large community with active members ensures that developers are up-to-date with the latest trends.

It receives regular improvements and updates, presenting developers with bug fixes, new features, etc.

Limitations of MUI

• Steep Learning Curve

MUI can be challenging for beginners, especially in understanding how customization and component properties work.

• Heavily Relies of Dependencies

Adding more libraries and frameworks would not only increase the size of the project but also the load time.

• Constrained Design

Material UI follows Google's Material Design guidelines may limit design creativity. This means the designer/developer is constrained to a particular look and design feel.

For more unique or personalized designs, designers may require other customization options.

The process of installing Material UI requires that you have or understand the following;

• Installed Node.js and Node Package Manager
• Installed React in your Project
• Understand JavaScript and how to work with React.js (To an extent)

Step One: InstalI MUI

The installation process is as follows;

On the MUI official webpage, there are options for installation which include; choosing default installation which will install MUl, and Emotion (default styling engine for MUI) or Styled-Component.

Note: Emotion and Styled-Component are styling engines or solutions for MUI. However, Styled-Components is not compatible with server-side rendered projects (websites that generate HTML on the server and send it to the client).

In this case, we’ll be choosing the default installation - In your React.js project, go to the terminal, paste, and run the following command.

npm install @mui/material @emotion/react @emotion/styled

Step Two: Add Font Style to your project

MUI uses Roboto font by default, if we want to use the same font we need to add it to our project by running the following command;

npm install @fontsource/roboto

Step Three: Install Icons

Install Icons to integrate material design icons into our project.

npm install @mui/icons-material

After installing the dependencies, remember to start your server up by running “npm run dev” in the terminal.

Let’s see how we can get components to work in our project.

On the MUI website, when you scroll through the sidebar you’ll see the option “Components”, click on it and select “All Components”.

If you explore the page, you’ll find different component options e.g. Text field, switch, checkbox, slider, and more.

You’ll also notice that the components are displayed in groups, such as inputs, data display, and feedback.

Go to the react-project on VS Code, and delete everything in the APP component to get started working with MUI components.

Note: If you’re familiar with creating a React project using Vite, you already know that Vite generates a default APP component which serves as the entry point of your application located in the src folder of your project.

Let’s select a component from MUI documentation. In this case, we’ll be selecting an APP Bar component that displays information and actions relating to the current screen. It is used for branding, screen titles, navigation, and actions.

If we view the code, we’ll see that different layered components are working together to achieve APP Bar functionality such as Toolbar, Typography, and so on.

At the top of the code, we’ll see different imports of components, this ensures that each component works correctly in our project.

The next step involves copying the code and pasting it into the APP component in VScode.

Let’s create a component named ButtonAppBar - paste the source code from MUI,

And then import the ButtonAppBar into the APP component and render or return the ButtonAppBar component like so;

This is what it would look like on the web page;

Note: Remove default styles from your project so it doesn't affect the behavior or appearance of the Component.

Let’s adjust the color of the APP Bar - by default, its primary blue, and we’ll change it to green. The style property is added to the APP Bar component like so;

<AppBar position="static" style={{ backgroundColor: "green" }}>

This is just the basic example there are other ways to modify the MUI component style by changing default styles to match your preference, and they include;

Component Props

Properties control the appearance, and other attributes of a component e.g. variant, sx, style, etc.

Example;

We added a component called MediaCard to our App, here’s how the MediaCard appears with default styling;

Let’s make changes to the code to change the style;

In the image above the typography component has a variant that is set to variant=”body2”

<Typography variant="body2" color="text.primary">

This is what the code looks like;

We can change the variant to variant=”body1” which will change the text element of the card by increasing the size and spacing of the text.

We can also change the button size from small to large, as shown in the above image. Like so;

    <Button size="small">Share</Button>       
    <Button size="large">Learn More</Button>

The SX-Property

This is similar to using inline styles= {{color: ‘red’}} in React. Here’s what the “sx” property looks like and how you can define styling syntax.

<CardActions>
        <Button
          size="small"
          sx={{
            color: "success.dark",
          }}
        >
          Share
        </Button>
        <Button size="large">Learn More</Button>
      </CardActions>

The sx property is added to the button component to change the color from the default color to “success. dark”

Theming

Another option is to modify the MUI default theme via Theming. Let’s look at a brief example.

Step One:

Create a theme file in your source folder, import createTheme from MUI like so;

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

const theme = createTheme({
 
});

export default theme;

The creatTheme function is where we'll define colors, spacing units, typography, etc

Step Two: In the Main component where the component is rendered; import

import { CssBaseline, ThemeProvider } from "@mui/material";

And

import theme from "./theme.jsx";

Which we created earlier to define styles for our project.

*Step Three: Wrap your App component in the ThemeProvider and render the <CssBaseline /> component like so;

Step Four: Add styles to the createTheme function. Let’s add a palette to set up the main color theme of our application.

This is what it looks like in our code;

import { createTheme } from "@mui/material";
import { blue, pink } from "@mui/material/colors";


const theme = createTheme({
  palette: {
    primary: {
      light: pink[300],
      main: pink[500],
      dark: pink[900],
    },
    secondary: {
      light: "#ff7961",
      main: "#f44336",
      dark: "#ba000d",
    },
  },
});


export default theme;

In our application, everything defaults to the primary color as shown in the image below, even the buttons take the color of the primary main color.

We can also customize other components, for instance, the default colors in MUI for buttons are success, error, info, warning, etc. What if we want to change the color of warning to purple instead of the amber default color, we can simply change it in the createTheme function like so;

import { createTheme } from "@mui/material";
import { pink, purple } from "@mui/material/colors";


const theme = createTheme({
  palette: {
    primary: {
      light: pink[300],
      main: pink[500],
      dark: pink[900],
    },
    secondary: {
      light: "#ff7961",
      main: "#f44336",
      dark: "#ba000d",
    },


    warning: {
      main: purple[500],
    },
  },
});


export default theme;

Default color;

Modified color;

Let’s style our card component- in the createTheme function, add the following

components:{
    MuiCard:{
        styleOverrides:{
            root:{       
            }
        }
    }
  }

MuiCard (material UI card) is the component we want to style - when you type MUI you’ll see different MUI components.

StyeOveride allows us to design our components as we prefer.

Root: Allows us to override everything about the element.

Let’s change the border radius of our card like so;

Different elements of a component can be targeted that is if you do not want to style the entire component. There’s so much more that can be done to override the style of a component in MUI, and the documentation provides information about custom styling.

Combining React and Material UI into projects offers front-end developers many benefits. MUI offers features and pre-built components for developers to build and ship projects faster.

Getting started is straightforward, and there are a ton of resources and vast documentation to help you get started and also to assist when you get stuck.