Why should you use Material UI?
Published: 2023-05-27 22:01:39


by [Goodluck Woha](https://blog.openreplay.com/authors/goodluck-woha)

<blockquote><em>Material UI is a popular choice among developers for several reasons. It provides a comprehensive and customizable set of pre-built components, making it easy to build high-quality user interfaces. It adheres to the Material Design guidelines, providing a consistent and familiar design language for users, and its theming system allows developers to easily customize the look and feel of their application. This article will show you why you should adopt Material UI!</em></blockquote>




[Material UI](https://mui.com) is a comprehensive, customizable, and easy-to-use UI library developed by [Google](https://google.com) to help developers of all skill levels build responsive and visually appealing user interfaces that adhere to the Material Design guidelines. With its extensive library of pre-built components and intuitive theming system, Material UI is an effective out-of-the-box solution for creating high-quality interfaces for different projects.

Material UI utilizes the CSS-in-JS technique to generate CSS styles from JavaScript code. Developers can take advantage of this technique by using the makeStyles component, which allows them to write CSS styles in a camel case format for easy customization and reuse across components.

## Common components

In this section, you will learn about some of the most common Material UI components. Components found in Material UI cover a wide range of use cases, from basic layouts to more complex interactive elements. Most of the components accept props which makes them easily customizable. Here are some of the most commonly used components in Material UI:

- Button: Whether you need a simple call-to-action button or a more complex button with icons and text, the `Button` component in Material UI has got you covered. The component offers several variants, including contained, outlined, and text, and customizable props, including color (primary, secondary, error, etc.), size (small, medium, large), disabled, startIcon, and endIcon.

- Typography: The `Typography` component is a versatile component that can be used to display text in various styles and formats, with support for several variants, including body, headline, and caption. It also offers useful features such as text truncation and wrapping, which help present lengthy text. Additionally, it provides the option of text transformation, enabling you to alter the case of your text.

- AppBar: The `AppBar` component provides a top app bar that can be used to display important information such as the page title, navigation menu, and action items. It can be customized in terms of color, elevation, and position, and supports additional features such as flexible space and scrolling behavior.

- ToolBar: The `Toolbar` component is a container element that can wrap other elements within the `AppBar`. It allows developers to create a more complex layout within the `AppBar`, adding actions and menus.

- Container: The `Container` component is a layout component that can center and contain other components within a fixed-width container. It supports several variants, such as fixed and fluid, and can be customized in terms of maxWidth and disableGutters.

- Grid: The `Grid` component is a layout component that allows developers to create responsive layouts using a grid system, including flex. It supports several variants: auto, fixed, fluid, and flex. The Grid component can be customized regarding spacing, alignment, and direction.

- Card: The `Card` component is a container element that can be used to display content in a structured and visually appealing way. It can be customized in terms of color, elevation, and shape, and supports additional features such as a header and footer. It also supports three sub-components: `CardMedia`, `CardContent`, and `CardActions`.

- CardMedia: The `CardMedia` component displays images or videos within a `Card`. It supports several props, such as height, width, and media type.

- CardContent: The `CardContent` component can display content within a `Card`. It provides useful features such as text truncation and wrapping, and supports several variants such as title, subtitle, and body.

- CardActions: The `CardActions` component can display action buttons within a `Card`. It allows developers to add buttons such as "Learn more" or "Buy now" to the Card.

## Installation & Setup

In this section, you will learn how to install a new React project with Material UI. You can skip this step if you already have a React project set up. Otherwise, you can create a new React project using the command:
```
npx create-react-app my-project
```
And navigating into the new project directory with the following:
```
cd ./my-project
```
With your project setup, you can finally install Material UI into your project using npm or yarn.

### Installation via npm

To install Material UI using npm, open your terminal and navigate to your project directory. Then, run the following command:
```
npm install @material-ui/core
```
### Installation via yarn

If you prefer using yarn, you can install Material UI by running the following command in your terminal:
```
yarn add @material-ui/core
```


<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>


## How to use Material UI

In this section, we will explore using Material UI's CSS components to create common UI elements such as navigation bars, buttons, and typography in a sample blog application. 

Let's start with the navigation bar. For this, we'll need to import the following components into our project. I'll import this into the "App.js" file and delete the JSX boilerplate provided by `creat-react-app`.
```javascript
import {
  AppBar,
  Grid,
  Card,
  Button,
  Container,
  Toolbar,
  Typography,
  CardMedia,
  CardContent,
  CardActions,
} from "@material-ui/core";
```
Let's use the AppBar, Toolbar, and Typography components first in our JSX:
```jsx
return (
  <div>
    <AppBar position="relative">
      <Toolbar>
        <Typography variant="h6">Home</Typography>
        <Typography variant="h6">Blog</Typography>
        <Typography variant="h6">About</Typography>
      </Toolbar>
    </AppBar>
  </div>
);
```
![-](https://i.imgur.com/9wHz0SX.png)

Underneath the `AppBar` tag, we'll use the `Container` component to hold all our content for the blog starting.
```jsx
<Container>

</Container
```
Inside this component, let's use the Typography component with a variant of `h1` and `center` alignment for our welcome message to the blog. The great thing about Typography is that it gives you a nice "Roboto" styling right from the go. 
```jsx
<Container>
    <Typography variant="h1" align="center">
        Welcome To My Blog!
    </Typography>
</Container>
```
![-](https://i.imgur.com/w6U410s.png)

Next, we'll add our actual blog content to the page. This will include images, topics, and buttons which say "Read More". To help organize this content, we'll use the `Grid` component from Material UI. The first `Grid` will be given the prop of `container`, and the second will be the prop of `item`.
```jsx
<Container>
    <Typography variant="h1" align="center">
        Welcome To My Blog!
    </Typography>
    
    <Grid container>
        <Grid item>
        </Grid>
    </Grid>
</Container>
```
Inside the second `Grid` we'll use the `Card` component to hold the `CardMedia` for our image, the `CardContent` for our topic, and the `CardActions`, containing a "Read More" button.
```jsx
<Grid container>
  <Grid item>
    <Card>
      <CardMedia
          component="img"
          image="https://images.unsplash.com/photo-1487014679447-9f8336841d58?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3405&q=80"
          title="image from unsplash"
        />
      <CardContent>
        <Typography variant="h5">
            Why should I use Material UI?
          </Typography>
        <Typography variant="body">
            Change the styling of your site with Material UI
          </Typography>
        </CardContent>
        <CardActions>
          <Button variant="contained" color="primary">
            Read More
          </Button>
        </CardActions>
    </Card>
  </Grid
</Grid>
```
![-](https://i.imgur.com/EYVa9cm.jpg)

Let's add some more blogs to the `Grid`. We'll create an array of numbers from 1 to 6, map through it and return the same blog content like so:
```jsx
<Grid container>
  {[1, 2, 3, 4, 5, 6].map((styleKey) => (
    <Grid item key={styleKey}>
      <Card>
        <CardMedia
          component="img"
          image="https://images.unsplash.com/photo-1487014679447-9f8336841d58?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3405&q=80"
          title="image from unsplash"
        />
        <CardContent>
          <Typography variant="h5">
            Why should I use Material UI?
          </Typography>
          <Typography variant="body">
            Change the styling of your site with Material UI
          </Typography>
        </CardContent>
        <CardActions>
          <Button variant="contained" color="primary">
            Read More
          </Button>
        </CardActions>
      </Card>
    </Grid>
  ))}
</Grid>
```
![-](https://i.imgur.com/BFr3D44.jpg)

### Adding custom styling

Material UI makes it very easy to write CSS-in-JS code enabling us to make more CSS changes to our taste. To better change the styling of what we already have, we can use the makeStyles function from Material UI, which allows us to create CSS classes with JavaScript.

Create a new file called "sytles.js", Import `makeStyles` from the Material UI package and create a hook called `useStyles` to hold the `makeStyles` component which we give a callback function that returns our styles in a JSON object. We will also return this as a default function:
```javascript
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles(() => ({
  
}));
export default useStyles;
```
With this, we can define all the CSS we need. For example, we can add some padding to the navigation items like so:
```javascript
const useStyles = makeStyles(() => ({
  navItems: {
    padding: 10,
  },
}));
```
To use this style, we first import the `useStyles` hook and create a new variable called the hook.
```javascript
import useStyles from "./styles";

function App() {
  const classes = useStyles();
```
Then use the style we need through the new variable like so:
```jsx
<AppBar position="relative">
  <Toolbar>
    <Typography className={classes.navItems} variant="h6">
      Home
    </Typography>
    <Typography className={classes.navItems} variant="h6">
      Blog
    </Typography>
    <Typography className={classes.navItems} variant="h6">
      About
    </Typography>
  </Toolbar>
</AppBar>
```
![-](https://i.imgur.com/2Bciz5l.png)

### Media Queries

Media queries are a powerful way to create responsive designs that adjust to different screen sizes. We can set breakpoints and apply specific CSS rules to our components with media queries when the screen size reaches a certain width. For example, let's say we want to change the number of rows in our `Grid` component from one to three on wider screens; we can achieve this with the `xs`, `sm`, `md`, and `lg` props.
```jsx
<Grid sm={4} item key={styleKey}>
```
![-](https://i.imgur.com/tsVSmlI.jpg)

## Alternatives to Material UI

While Material UI is a popular choice among developers, several alternatives are available, each with unique features and benefits. Here are some of the most popular alternatives to Material UI:

- [Bootstrap](https://getbootstrap.com) is a popular CSS framework developed by Twitter, offering a comprehensive set of pre-built components for building responsive user interfaces. It provides a range of features, including a powerful grid system, typography, forms, buttons, and more. Bootstrap is easy to use and customize, making it a great choice for developers of all skill levels.

- [Semantic UI](https://semantic-ui.com) is another CSS framework that offers a range of pre-built components and customizable themes. It provides a clean and intuitive syntax, making it easy to read and write. Additionally, it includes a wide range of UI elements, including buttons, forms, modals, and more.

- [Bulma](https://bulma.io) is a modern CSS framework that provides a clean and intuitive syntax, making it easy to read and write. It includes various pre-built components, such as forms, buttons, and navigation, and provides a powerful theming system for customization.

Each of these frameworks has unique features and benefits, so it's important to choose the one that best suits your project's needs and personal preferences.

## Conclusion

Material UI is an excellent choice for building responsive web applications with a modern look and feel. With its wide range of components, developers can quickly and easily create complex layouts and user interfaces. Moreover, the API documentation for Material UI is thorough and easy to navigate, making learning about each component and customizing it to suit your specific needs is straightforward. Whether building a simple website or a complex web application, Material UI can help you achieve your design and functionality goals while ensuring a smooth and responsive user experience.