REACT Material-UI

Material-UI (MUI) is a popular React component library that follows Google’s Material Design principles. It provides pre-designed, customizable components to build modern, responsive web applications quickly.

1. Install Material-UI in a React Project

To start using Material-UI, install the core package and icons:

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

Try It Now

For Material-UI icons:

npm install @mui/icons-material

Try It Now

2. Using a Basic Material-UI Component

Here’s how to use a Button component from Material-UI:

import React from "react";
import Button from "@mui/material/Button";

const App = () => {
  return (
    <div>
      <h1>Material-UI Button Example</h1>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </div>
  );
};

export default App;

Try It Now

  • The variant prop controls the button style (contained, outlined, text).
  • The color prop sets the button color (primary, secondary, etc.).

 

3. Material-UI Core Components

MUI provides several built-in components. Here are some commonly used ones:

Typography (Text Elements)

import Typography from "@mui/material/Typography";

<Typography variant="h1">Heading 1</Typography>
<Typography variant="body1">This is a paragraph.</Typography>

Try It Now

Text Field (Input)

import TextField from "@mui/material/TextField";

<TextField label="Enter Name" variant="outlined" />

Try It Now

Card (UI Container)

import { Card, CardContent, Typography } from "@mui/material";

<Card>
  <CardContent>
    <Typography variant="h5">Card Title</Typography>
    <Typography variant="body2">Some card content here.</Typography>
  </CardContent>
</Card>

Try It Now

4. Material-UI Styling Approaches

MUI supports multiple ways to style components:

1. Inline Styling with SX Prop

The sx prop is the recommended way to style MUI components:

<Button sx={{ backgroundColor: "blue", color: "white" }}>
  Styled Button
</Button>

Try It Now

2. Custom Styles with makeStyles (JSS)

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  customButton: {
    backgroundColor: "purple",
    color: "white",
    padding: "10px 20px",
  },
});

const MyComponent = () => {
  const classes = useStyles();
  return <Button className={classes.customButton}>Styled with JSS</Button>;
};

Try It Now

5. Material-UI Theme Customization

You can create a custom theme to override default styles across your app.

Create a Custom Theme

import { createTheme, ThemeProvider } from "@mui/material/styles";
import Button from "@mui/material/Button";

const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2", // Custom Primary Color
    },
    secondary: {
      main: "#d32f2f", // Custom Secondary Color
    },
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">Primary Button</Button>
      <Button color="secondary" variant="contained">Secondary Button</Button>
    </ThemeProvider>
  );
};

export default App;

Try It Now

6. Material-UI Grid System (Responsive Layout)

Material-UI has a flexbox-based Grid system similar to Bootstrap.

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

<Grid container spacing={2}>
  <Grid item xs={12} sm={6} md={4}>
    <div style={{ backgroundColor: "lightblue", padding: "20px" }}>Item 1</div>
  </Grid>
  <Grid item xs={12} sm={6} md={4}>
    <div style={{ backgroundColor: "lightgreen", padding: "20px" }}>Item 2</div>
  </Grid>
</Grid>

Try It Now

  • Responsive Grid: xs={12} (full width on small screens), sm={6} (half width on medium screens), md={4} (one-third width on large screens).
  • spacing={2} adds margin between grid items.

 

7. Material-UI Dialogs & Modals

Dialogs (Modals) help display pop-up messages or forms.

import { useState } from "react";
import { Dialog, DialogTitle, DialogContent, Button } from "@mui/material";

const MyDialog = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="contained" onClick={() => setOpen(true)}>Open Dialog</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogContent>This is the dialog content.</DialogContent>
      </Dialog>
    </>
  );
};

export default MyDialog;

Try It Now

8. Material-UI Drawer (Sidebar)

You can use Drawer to create side navigation menus.

import { useState } from "react";
import { Drawer, Button, List, ListItem } from "@mui/material";

const MyDrawer = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Menu</Button>
      <Drawer anchor="left" open={open} onClose={() => setOpen(false)}>
        <List>
          <ListItem button>Home</ListItem>
          <ListItem button>About</ListItem>
        </List>
      </Drawer>
    </>
  );
};

export default MyDrawer;

Try It Now

9. Material-UI Table (Data Display)

Material-UI provides tables to display data efficiently.

import { Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";

const MyTable = () => {
  const data = [
    { id: 1, name: "Alice", age: 25 },
    { id: 2, name: "Bob", age: 30 },
  ];

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>ID</TableCell>
          <TableCell>Name</TableCell>
          <TableCell>Age</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.id}</TableCell>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.age}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

export default MyTable;

Try It Now

10. Deploying Material-UI React App

After building your Material-UI React app, you can deploy it using:

  • Vercel (vercel deploy)
  • Netlify (npm run build → Upload build folder)
  • GitHub Pages (npm run build → gh-pages deployment)