Category: Material UI

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize tooltips and add typography with Material UI.

Disabled Elements

If we want to show a tooltip on a disabled element, then we’ve to wrap the disabled element with a wrapper element.

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <Tooltip title="disabled">
      <span>
        <Button disabled>Disabled Button</Button>
      </span>
    </Tooltip>
  );
}

We wrap the disabled button with a span so that we can see the tooltip when we hover over it.

Transitions

We can show various transitions when we show our tooltip.

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";
import Fade from "@material-ui/core/Fade";

export default function App() {
  return (
    <Tooltip
      TransitionComponent={Fade}
      TransitionProps={{ timeout: 600 }}
      title="tooltip"
    >
      <Button>Fade</Button>
    </Tooltip>
  );
}

to add a fade transition when we show or hide the tooltip.

Other effects include the zoom effect:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";
import Zoom from "@material-ui/core/Zoom";

export default function App() {
  return (
    <Tooltip
      TransitionComponent={Zoom}
      TransitionProps={{ timeout: 600 }}
      title="tooltip"
    >
      <Button>Fade</Button>
    </Tooltip>
  );
}

We set the TransitionProps to change the duration of the effect.

Showing and Hiding

We can also add a delay for showing and hiding the tooltip.

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <Tooltip title="tooltip" enterDelay={500} leaveDelay={200}>
      <Button>button</Button>
    </Tooltip>
  );
}

We add a delay when we show the tooltip and when we hide it.

The numbers are in milliseconds.

Typography

We can change the font of our app with the Typography component.

The Roboto font isn’t automatically by Material UI.

To load it, we can add the following CSS:

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

We can also install the fontsource-roboto package:

npm install fontsource-roboto

and write:

import 'fontsource-roboto';

Typography Component

We can add the Typography component to render various text styles.

For example, we can write:

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <>
      <Typography variant="h1" component="h2" gutterBottom>
        h1.
      </Typography>
      <Typography variant="h2" gutterBottom>
        h2.
      </Typography>
      <Typography variant="h3" gutterBottom>
        h3.
      </Typography>
      <Typography variant="h4" gutterBottom>
        h4.
      </Typography>
      <Typography variant="h5" gutterBottom>
        h5.
      </Typography>
      <Typography variant="h6" gutterBottom>
        h6.
      </Typography>
    </>
  );
}

to render various headings with it.

The element we render is set in the variant prop.

gutterBottom adds some margins to the bottom.

There are also various body text styles we can render:

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <>
      <Typography variant="subtitle1" gutterBottom>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
        blanditiis tenetur
      </Typography>
      <Typography variant="subtitle2" gutterBottom>
        Morbi maximus maximus nisl, in tristique augue convallis vel. Praesent
        eget scelerisque ex, a sagittis libero.
      </Typography>
      <Typography variant="body1" gutterBottom>
        Vivamus ultrices nunc a est pulvinar sodales.
      </Typography>
      <Typography variant="body2" gutterBottom>
        Proin tincidunt nunc sed orci suscipit varius. Suspendisse volutpat
        interdum iaculis.
      </Typography>
    </>
  );
}

We set the variant to subtitle1 , subtitle2 , body1 or body2 to display various body text styles.

There’re also styles for buttons, captions, and overline text:

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <>
      <Typography variant="button" display="block" gutterBottom>
        button text
      </Typography>
      <Typography variant="caption" display="block" gutterBottom>
        caption text
      </Typography>
      <Typography variant="overline" display="block" gutterBottom>
        overline text
      </Typography>
    </>
  );
}

Theme

We can use the typography key of a theme to style our text.

For example, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    ...theme.typography.button,
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(1)
  }
}));

export default function App() {
  const classes = useStyles();

  return <div className={classes.root}>some div</div>;
}

We added the theme.typography.button style to our styles so that we can apply it anywhere.

Conclusion

We can tooltips anywhere.

Typography components can be added to display text.

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add modals with Material UI.

Modal

We can use the Modal component to display dialog boxes our way.

To create a simple one, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";

function getModalStyle() {
  const top = 50;
  const left = 50;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`
  };
}

const useStyles = makeStyles(theme => ({
  paper: {
    position: "absolute",
    width: 300,
    backgroundColor: theme.palette.background.paper,
    padding: 20
  }
}));

export default function App() {
  const classes = useStyles();
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const body = (
    <div style={modalStyle} className={classes.paper}>
      <h2>Modal</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      <SimpleModal />
    </div>
  );

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        Open Modal
      </button>
      <Modal open={open} onClose={handleClose}>
        {body}
      </Modal>
    </div>
  );
}

to create a simple modal.

We added some styles with the makeStyles component and the getModalStyle function.

We used makeStyles to set the background color and the positioning of the content.

We change the position to absolute so that it displays above everything else.

getModalStyle is used for positioning the modal.

Transitions

We can animate the modal with a transition component.

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import Backdrop from "@material-ui/core/Backdrop";
import Fade from "@material-ui/core/Fade";

const useStyles = makeStyles(theme => ({
  modal: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: "2px solid gray",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3)
  }
}));

export default function App() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        open modal
      </button>
      <Modal
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500
        }}
      >
        <Fade in={open}>
          <div className={classes.paper}>
            <h2>fade modal</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </Fade>
      </Modal>
    </div>
  );
}

to create a modal with a fade transition when we open or close it.

This is done with the Fade component.

The in prop specifies that we show the transition when open is true .

We then have what we want to display inside the modal.

We open the modal when we click the open modal button.

And we can click outside when we close it.

handleOpen sets the open state to true to open the modal.

hanleClose closes the modal to close the modal.

onClose is run when we click outside the modal.

BackdropComponent sets the component for the backdrop.

closeAfterTransition lets us wait until a nested transition is done before closing.

Also, we can use the react-spring package to add the transition:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import Backdrop from "@material-ui/core/Backdrop";
import { useSpring, animated } from "react-spring/web.cjs"; // web.cjs is required for IE 11 support

const useStyles = makeStyles(theme => ({
  modal: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: "2px solid #000",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3)
  }
}));

const Fade = React.forwardRef(function Fade(props, ref) {
  const { in: open, children, onEnter, onExited, ...other } = props;
  const style = useSpring({
    from: { opacity: 0 },
    to: { opacity: open ? 1 : 0 },
    onStart: () => {
      if (open && onEnter) {
        onEnter();
      }
    },
    onRest: () => {
      if (!open && onExited) {
        onExited();
      }
    }
  });

  return (
    <animated.div ref={ref} style={style} {...other}>
      {children}
    </animated.div>
  );
});

export default function SpringModal() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        open menu
      </button>
      <Modal
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500
        }}
      >
        <Fade in={open}>
          <div className={classes.paper}>
            <h2>Spring modal</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </Fade>
      </Modal>
    </div>
  );
}

We created the Fade component.

We use the useSpring hook provided by react-spring to add the animation.

We specify the transition style for the in transition in the friom property.

Also, we specify the transition style for the out transition with the to property.

onStart and onExited are functions that’s called when the transition starts and ends respectively to start and finish the transition.

Then we use Fade in the modal.

Conclusion

We can create modals with transitions by using components from Material UI or react-spring.

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add lists with Material UI.

Interactive Lists

We can add various kinds of lists with Material UI.

The simplest kind if the ones with only texts in each entry.

To add a text-only list, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

We add a list with all text by using the ListItemText component.

primary is the primary text to display for each item.

To add a list with icons, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import FolderIcon from "@material-ui/icons/Folder";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemIcon>
              <FolderIcon />
            </ListItemIcon>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

We have the ListItemIcon to position the icon.

FolderIcon has the icon.

The icon will be displayed on the left of the text.

Also, we can add avatars in a similar way.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

Then we have an avatar of the folder icon on the left of the text instead of just the folder icon itself.

We use the ListItemAvatar to surround the Avater and FolderIcon to place them properly.

We can also add an icon to the right of the text.

It’ll be placed on the right edge of the list item.

To do that, we can use the ListItemSecondaryAction component.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={f.name} key={f.key} />
            <ListItemSecondaryAction>
              <IconButton edge="end">
                <DeleteIcon />
              </IconButton>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
      </List>
    </div>
  );
}

to add the ListItemSecondaryAction below the ListItemText .

This will place the secondary action icon on the right edge.

Align List Items

To align list items when displaying 3 lines or more, we can set the alignItems prop to flex-start .

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem alignItems="flex-start" key={f.key}>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText
              primary={f.name}
              secondary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis, metus vitae vestibulum suscipit, eros nisi ultrices urna, facilisis dictum erat dolor non justo. "
            />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

to move the icon slightly down to align better with the long text.

Conclusion

We can make lists with icons in various locations.

The icon can be on the left or the right of the text.

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add icons and lists with Material UI.

Icon Color

We can change the color of icons.

To do that, we add the color prop to the icon.

For example, we can write:

import React from "react";
import red from "@material-ui/core/colors/red";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <MailIcon />
      <MailIcon color="primary" />
      <MailIcon color="secondary" />
      <MailIcon color="action" />
      <MailIcon color="disabled" />
      <MailIcon style={{ color: red[500] }} />
    </div>
  );
}

to add icons with different colors.

The color prop lets us change the color style of the icon.

We can also change it with the style prop.

We set the color by import the color from Material UI.

Size

To change the size of an icon, we can change the fontSize prop.

For example, we can write:

import React from "react";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <MailIcon fontSize="small" />
      <MailIcon />
      <MailIcon fontSize="large" />
      <MailIcon style={{ fontSize: 50 }} />
    </div>
  );
}

The fontSize can be set to small or large .

To set a custom size, we can also set the style prop with the fontSize of our choice.

Font icons

To add our own icons from the Material Icons CDN, we can add a link tag to index.html :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Once we did that, we can use the Icon component:

import React from "react";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon>star</Icon>
    </div>
  );
}

We can also change the color with this component.

For example, we can write:

import React from "react";
import green from "@material-ui/core/colors/green";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon>star</Icon>
      <Icon color="primary">star</Icon>
      <Icon color="secondary">star</Icon>
      <Icon style={{ color: green[500] }}>star</Icon>
      <Icon fontSize="small">star</Icon>
    </div>
  );
}

We have the name of the icon in between the tags.

And we set the color prop to change the color.

Font Awesome

In addition to Material Icons, we can add Font Awesome icons.

We can use version 5 without signing up.

We just have to add:

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
/>
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.13.1/css/v4-shims.css"
/>

Then we can write:

import React from "react";
import green from "@material-ui/core/colors/green";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon className="fa fa-close" />
      <Icon className="fa fa-close" color="primary" />
      <Icon className="fa fa-close" color="secondary" />
      <Icon className="fa fa-close" style={{ color: green[500] }} />
      <Icon className="fa fa-close" fontSize="small" />
    </div>
  );
}

to add our Font Awesome icons.

The props work with Font Awesome icons.

Lists

Lists are continuous containers of text and images.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts";

export default function App() {
  return (
    <div>
      <List component="nav">
        <ListItem button>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="home" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="mail" />
        </ListItem>
      </List>
      <Divider />
      <List component="nav">
        <ListItem button>
          <ListItemText primary="logout" />
        </ListItem>
      </List>
    </div>
  );
}

to add a list with the List component.

To add items inside the list, we can add one or moreListItem components inside it.

The button prop will make them render as buttons.

List items can have icons beside it.

Also, we can add Dividers to add dividers.

Nested List

Lists can be nested.

To do that, we add a Collapse component within our List .

For instance, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Collapse from "@material-ui/core/Collapse";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import DraftsIcon from "@material-ui/icons/Drafts";

export default function App() {
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <div>
      <List component="nav">
        <ListItem button>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="home" />
        </ListItem>
        <ListItem button onClick={handleClick}>
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="mail" />
        </ListItem>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <List component="div" disablePadding>
            <ListItem button>
              <ListItemText primary="important mail" />
            </ListItem>
          </List>
        </Collapse>
      </List>
    </div>
  );
}

to add a Collapse component into our List .

The in prop controls when the nested list is expanded.

unmountOnExit will remove the nested list from the DOM.

We control whether it’s opened or not with the 2nd ListItem .

The handleClick component toggles the open state.

Conclusion

We can add icons from various sources with Material UI.

Also, we can add lists to display items vertically.

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add dividers and icons with Material UI.

Subheader Dividers

We can have dividers with text immediately below it.

To do that, we add some styles of our own to shift the text to be flush with the dividers.

For example, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
import Avatar from "@material-ui/core/Avatar";
import BeachAccessIcon from "@material-ui/icons/BeachAccess";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  },
  dividerFullWidth: {
    margin: `5px 0 0 ${theme.spacing(2)}px`
  },
  dividerInset: {
    margin: `5px 0 0 ${theme.spacing(9)}px`
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <List className={classes.root}>
      <ListItem>
        <ListItemText primary="eat" />
      </ListItem>
      <Divider component="li" />
      <li>
        <Typography
          className={classes.dividerFullWidth}
          color="textSecondary"
          display="block"
          variant="caption"
        >
          drink
        </Typography>
      </li>
      <ListItem>
        <ListItemText primary="drink" />
      </ListItem>
      <Divider component="li" variant="inset" />
      <li>
        <Typography
          className={classes.dividerInset}
          color="textSecondary"
          display="block"
          variant="caption"
        >
          Leisure
        </Typography>
      </li>
      <ListItem>
        <ListItemAvatar>
          <Avatar>
            <BeachAccessIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText primary="walk" />
      </ListItem>
    </List>
  );
}

to add some list items with a divider below them.

And then we add text with the Typography component.

This way, we see the text with the margins.

Middle Dividers

We can add dividers that display in the middle of a container.

To add the middle divider, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360
  },
  section1: {
    margin: theme.spacing(4, 2)
  },
  section2: {
    margin: theme.spacing(2)
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <div className={classes.section1}>
        <Grid container alignItems="center">
          <Grid item xs>
            <Typography gutterBottom variant="h4">
              Message
            </Typography>
          </Grid>
        </Grid>
      </div>
      <Divider variant="middle" />
      <div className={classes.section2}>
        <Typography gutterBottom variant="body1">
          hello world
        </Typography>
      </div>
      <div>
        <Button color="primary">ok</Button>
      </div>
    </div>
  );
}

We have the Divider component with the variant prop set to middle to make it display in the middle.

Then we have the styles in the makeStyles callback to move the text so that it’s flush with the divider.

Vertical Dividers

To add vertical dividers, we can use the orientation prop.

We can write:

import React from "react";
import FormatAlignLeftIcon from "@material-ui/icons/FormatAlignLeft";
import FormatBoldIcon from "@material-ui/icons/FormatBold";
import Grid from "@material-ui/core/Grid";
import Divider from "@material-ui/core/Divider";

export default function App() {
  return (
    <div>
      <Grid container alignItems="center">
        <FormatAlignLeftIcon />
        <Divider orientation="vertical" flexItem />
        <FormatBoldIcon />
      </Grid>
    </div>
  );
}

to add a vertical divider.

The orientation is set to vertical so that we can see the divider.

Icons

Material UI comes with many icons we can use.

We’ve to install the @material-ui/icons to use the icons.

To do that, we can run:

npm install @material-ui/icons

or:

yarn add @material-ui/icons

to add them to our code.

Then we can use it by importing them as follows:

import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";

export default function App() {
  return (
    <div>
      <DeleteIcon />
    </div>
  );
}

We just import them by their name and we’ll see them displayed.

SvgIcon

We can add our own SVG icon if we need to embed one that isn’t found in the package.

For example, we can write:

import React from "react";
import SvgIcon from "@material-ui/core/SvgIcon";

export default function App() {
  return (
    <div>
      <SvgIcon>
        <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" />
        <polygon points="12 15 17 21 7 21 12 15" />
      </SvgIcon>
    </div>
  );
}

to add a computed monitor icon available from https://feathericons.com/.

Conclusion

We can customize dividers to out liking so it’s flush with our text.

Icons can be added from the @material-ui/icons package or we can use the SvgIcon package to add them ourselves.