Material UI tutorial with examples

-

 

Material UI (MUI) Tutorial with Examples

Material UI (MUI) is a popular React component library that provides pre-designed, customizable UI components that follow Google’s Material Design guidelines. MUI makes it easy to build modern, responsive, and aesthetically pleasing user interfaces in React applications.

This tutorial will guide you through the basics of Material UI, including installation, component usage, and customization.

1. Prerequisites

Before you begin, ensure you have the following:

  • Node.js installed.
  • React environment set up (create-react-app or another setup).
  • A basic understanding of React.

2. Installing Material UI in a React App

First, create a new React app if you don’t have one yet.

bash
npx create-react-app mui-tutorial
cd mui-tutorial

Next, install Material UI and its dependencies:

bash
npm install @mui/material @emotion/react @emotion/styled
  • @mui/material contains all the core Material UI components.
  • @emotion/react and @emotion/styled are required for styling the components.

3. Basic Setup of Material UI in Your React App

After installation, import Material UI components and start using them.

Example: Simple Button

Create a new App.js file (or use your existing one), and start by importing and using a Material UI component, such as Button.

javascript
import React from 'react';
import { Button } from '@mui/material';

function App() {
  return (
    <div style={{ margin: '20px' }}>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </div>
  );
}

export default App;

In this example:

  • Button: A Material UI button component.
  • variant="contained": Gives the button a solid background color.
  • color="primary": Uses the primary color from the theme (which defaults to blue).

4. Using Material UI Components

Material UI offers a wide range of pre-designed components that you can use out-of-the-box. Here are some common ones:

TextField (Input Field)

javascript
import React, { useState } from 'react';
import { TextField, Button } from '@mui/material';

function App() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div style={{ margin: '20px' }}>
      <TextField
        label="Enter text"
        variant="outlined"
        value={inputValue}
        onChange={handleChange}
      />
      <Button variant="contained" color="primary" onClick={() => alert(inputValue)}>
        Submit
      </Button>
    </div>
  );
}

export default App;
  • TextField: This component is used for inputs (text fields). label adds a floating label to the input.
  • variant="outlined": Creates an outlined text field.

Typography (Text Styling)

javascript
import React from 'react';
import { Typography } from '@mui/material';

function App() {
  return (
    <div style={{ margin: '20px' }}>
      <Typography variant="h1">Material UI Example</Typography>
      <Typography variant="body1">This is a body of text styled using Material UI Typography component.</Typography>
    </div>
  );
}

export default App;
  • Typography: This component is used for text styling. The variant prop can be used to specify different text sizes, such as h1, h2, body1, etc.

5. Customizing Material UI with Themes

Material UI allows you to customize the look and feel of your components globally using a theme. You can change things like colors, typography, spacing, and more.

Example: Customizing the Theme

You can use createTheme from Material UI to customize the theme.

javascript
import React from 'react';
import { ThemeProvider, createTheme, Button } from '@mui/material';

const theme = createTheme({
  palette: {
    primary: {
      main: '#ff5722', // Orange color
    },
    secondary: {
      main: '#4caf50', // Green color
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div style={{ margin: '20px' }}>
        <Button variant="contained" color="primary">
          Primary Button
        </Button>
        <Button variant="contained" color="secondary" style={{ marginLeft: '10px' }}>
          Secondary Button
        </Button>
      </div>
    </ThemeProvider>
  );
}

export default App;
  • createTheme: This function allows you to create a custom theme.
  • ThemeProvider: Wraps your application with the custom theme, making it available to all Material UI components.

6. Layout and Grid System

Material UI provides a responsive Grid system that allows you to create layouts similar to CSS Grid or Flexbox.

Example: Responsive Grid Layout

javascript
import React from 'react';
import { Grid, Paper, Typography } from '@mui/material';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <Grid container spacing={2}>
        <Grid item xs={12} sm={6} md={4}>
          <Paper style={{ padding: '20px', textAlign: 'center' }}>
            <Typography variant="h6">Item 1</Typography>
            <Typography variant="body1">Some description for item 1.</Typography>
          </Paper>
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Paper style={{ padding: '20px', textAlign: 'center' }}>
            <Typography variant="h6">Item 2</Typography>
            <Typography variant="body1">Some description for item 2.</Typography>
          </Paper>
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Paper style={{ padding: '20px', textAlign: 'center' }}>
            <Typography variant="h6">Item 3</Typography>
            <Typography variant="body1">Some description for item 3.</Typography>
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}

export default App;
  • Grid: The Grid container is a flex container that holds the items. Each Grid item can be made responsive with breakpoints like xs, sm, md to define how many columns it should span based on the screen width.

7. Icons in Material UI

Material UI includes a set of built-in icons that you can use. You can install the icons package like this:

bash
npm install @mui/icons-material

Example: Using Icons

javascript
import React from 'react';
import { Button } from '@mui/material';
import { Delete, Add } from '@mui/icons-material';

function App() {
  return (
    <div style={{ margin: '20px' }}>
      <Button variant="contained" color="primary" startIcon={<Add />}>
        Add Item
      </Button>
      <Button variant="contained" color="secondary" startIcon={<Delete />}>
        Delete Item
      </Button>
    </div>
  );
}

export default App;
  • startIcon: Adds an icon before the button text.
  • Add and Delete: These are icons from the Material UI icons library.

8. Modal Dialog

Modals are often used for dialogs, forms, and additional content that requires user interaction.

Example: Simple Modal

javascript
import React, { useState } from 'react';
import { Button, Modal, Box, Typography } from '@mui/material';

function App() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div style={{ margin: '20px' }}>
      <Button variant="contained" color="primary" onClick={handleOpen}>
        Open Modal
      </Button>

      <Modal open={open} onClose={handleClose}>
        <Box
          sx={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            backgroundColor: 'white',
            padding: '20px',
            borderRadius: '4px',
            boxShadow: 24,
          }}
        >
          <Typography variant="h6" component="h2">
            This is a Modal!
          </Typography>
          <Button variant="contained" onClick={handleClose} style={{ marginTop: '10px' }}>
            Close
          </Button>
        </Box>
      </Modal>
    </div>
  );
}

export default App;
  • Modal: The Modal component creates a popup or dialog.
  • Box: The Box component is used for layout styling (here it’s used to center the modal content).

9. Conclusion

In this tutorial, we covered the following aspects of Material UI:

  • Installing and setting up Material UI in a React app.
  • Using key components like Button, TextField, Typography, Grid, and Modal.
  • Customizing the theme globally.
  • Adding icons from the Material UI Icons library.

Material UI provides a powerful, flexible, and customizable toolkit for building React applications with beautiful user interfaces. You can explore more advanced features such as data tables, charts, and advanced styling options as you dive deeper into the library. For more details, you can refer to the official Material UI documentation.

Comments

Post a Comment

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

-
  PrimeNG Tutorial: Frequently Used Classes and Components PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles. In this tutorial, we will explore some of the frequently used components and classes in PrimeNG , along with examples for creating interactive, modern, and responsive UIs. 1. Setting Up PrimeNG Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps: Step 1: Install PrimeNG and PrimeIcons Run the following commands to install PrimeNG and PrimeIcons: bash Copy code npm install primeng npm install primeicons Step 2: Import Required Modules After installation, you need to import the relevant PrimeNG modules in your app.module.ts . Example of importing commonly used modules: typescript Copy code import { NgModule ...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

oAuth in angular

-
 Implementing OAuth in an Angular application is a common requirement when you want to integrate with third-party services that require user authentication (e.g., Google, Facebook, GitHub) or enable Single Sign-On (SSO) across applications. OAuth allows users to authorize your app to access their data without sharing their credentials directly. In an Angular app, OAuth 2.0 is typically implemented using libraries like OAuth.js or Auth0 (for simpler management), or you can build the OAuth flow yourself. Below is a detailed guide on how OAuth 2.0 can be integrated into an Angular application using OAuth 2.0 with an identity provider and token handling. 1. Understand OAuth Flow OAuth 2.0 typically follows this flow: Authorization Code Flow : This is the most commonly used flow, which is secure and recommended for web applications. Implicit Flow : Used for client-side (JavaScript) applications, but not recommended anymore due to security concerns (e.g., exposing tokens in the URL)...
Read more